Why checkboxes of symfony form looks weird?

I am using twig with standalone symfony form with bootstrap. Here is my template source code:

    {{ form_start(form) }}
      <div class="row">
        <div class="col">
         {{ form_row(form.firstnameFa) }}
        </div>
        <div class="col">
          {{ form_row(form.lastnameFa) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
         {{ form_row(form.firstnameEn) }}
        </div>
        <div class="col">
          {{ form_row(form.lastnameEn) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.email) }}
        </div>
        <div class="col">
         {{ form_row(form.password) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.birthDate) }}
        </div>
        <div class="col">
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.showPhoto) }}
        </div>
        <div class="col">
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.applyCard) }}
        </div>
        <div class="col">
        </div>
      </div>
     <button class="btn btn-primary" type="submit">Submit form</button>
    {{ form_end(form) }}

And here is the html sorce I view:

<form name="form" method="post">

  <div class="row">

    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_firstnameFa">نام</label><div class="col-sm-10"><input type="text" id="form_firstnameFa" name="form[firstnameFa]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_lastnameFa">نام خانوادگی</label><div class="col-sm-10"><input type="text" id="form_lastnameFa" name="form[lastnameFa]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_firstnameEn">نام به انگلیسی</label><div class="col-sm-10"><input type="text" id="form_firstnameEn" name="form[firstnameEn]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_lastnameEn">نام خانوادگی به انگلیسی</label><div class="col-sm-10"><input type="text" id="form_lastnameEn" name="form[lastnameEn]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_email">ایمل</label><div class="col-sm-10"><input type="email" id="form_email" name="form[email]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_password">رمز عبور</label><div class="col-sm-10"><input type="password" id="form_password" name="form[password]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_birthDate">تاریخ تولد</label><div class="col-sm-10"><input type="text" id="form_birthDate" name="form[birthDate]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><div class="col-sm-2"></div><div class="col-sm-10"><div class="form-check">        <input type="checkbox" id="form_showPhoto" name="form[showPhoto]" required="required" class="form-check-input" value="1" />
        <label class="form-check-label required" for="form_showPhoto">درخواست صدور کارت دارید؟</label></div></div></div>
    </div>
    <div class="col">
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><div class="col-sm-2"></div><div class="col-sm-10"><div class="form-check">        <input type="checkbox" id="form_applyCard" name="form[applyCard]" required="required" class="form-check-input" value="1" />
        <label class="form-check-label required" for="form_applyCard">عکس شما در فهرست اعضا نشان داده شود؟</label></div></div></div>
    </div>
    <div class="col">
    </div>

  </div>

 <button class="btn btn-primary" type="submit">Submit form</button>

<input type="hidden" id="form__token" name="form[_token]" value="qwfZkACcKM9ylhGXAYoor8oV1DBNCMAE8nzPC8J_J24" /></form>

And here is the screenshot how it looks like enter image description here

  1. Why checkboxes looks weird? They are on first letter of writting. How to fix it? This is the same with English.
  2. And how to place the button in center there are two columns but the button must be in center?

Are you also using the twig form themes for bootstrap? If not, you should.

See https://symfony.com/doc/current/form/bootstrap4.html

Yes. this screenshot is with bootstrap_4_horizontal_layout.html.twig

As symfony Form adds fields to form, is there a way to add red asterisk * next to text of fields to show what are required and what are not? possible? how? @PaulOB @rpkamp

Don’t they have google where you live? https://stackoverflow.com/questions/45759939/how-can-i-put-the-asterisk-of-my-required-field-on-my-label-symfony-form

I was reading current doc of symfony that is 4.3. With link you gave me I see there is a chapter about this in doc of 3.3. I don’t know doc of 4.3 is not consistent or this ability is removed from 4.3.

As far as I know only China doesn’t have Google as each and every website is blocked in China! Now I understand why Hong Kong is not interested in China!

The solution supplied on stack overflow is a CSS solution, that should work regardless of Symfony version I think :slight_smile:

1 Like