Почему флажки форм Symfony выглядят странно? - PullRequest
Новая
       16

Почему флажки форм Symfony выглядят странно?

0 голосов
/ 08 октября 2019

Я использую веточку с автономной формой Symfony с начальной загрузкой. Вот мой исходный код шаблона: 

    {{ 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) }}

А вот HTML-код, который я просматриваю: 

<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>

А вот скриншот, как это выглядит enter image description here

1) Почему флажки выглядят странно? Они на первом письме письма. Как это исправить? Это то же самое с английским.

2) А как разместить кнопку в центре, есть две колонки, но кнопка должна быть в центре?

РЕДАКТИРОВАТЬ: я просто использую загрузчик css: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

1 Ответ

1 голос
/ 08 октября 2019

Попробуйте оформить свои флажки с плавающей точкой или полями, вот несколько примеров: 

.form-check input {
margin-left: 30px;
}

Или это: 

.form-check input {
float:right;
}

РЕДАКТИРОВАТЬ: Вы также можете попробовать это: 

.form-check-input {
    margin-right: -1.55rem;
}
...