Перекрывающийся текст при изменении размера браузера по горизонтали в Clarity 0.9.14

Поля формы перекрываются, когда размер области просмотра меньше. Есть ли способ привязать поля формы к следующей строке, когда места недостаточно?

Фрагмент кода:

<form class="compact">
          <div class="row">
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_1">This is a form field</label>
                  <input type="text" id="aForm_1" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
            <div class="col-xs-6">
              <section class="form-block">
                <div class="form-group">
                  <label for="aForm_2">Overlapping Text</label>
                  <input type="text" id="aForm_2" placeholder="Enter value here" size="45">
                </div>
              </section>
            </div>
          </div>
        </form>

Вот плункер: https://embed.plnkr.co/ynfi39fIMk1bc8bSBHAp/

перекрывающийся текст


vmware-clarity
person X.Vu    schedule 06.09.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

@X.Vu: Пожалуйста, взгляните на этот Plnkr: https://plnkr.co/edit/6YhGmFusvo5EdySzxNpn?p=preview

а также документацию Clarity Forms в Grid здесь: https://vmware.github.io/clarity/documentation/forms

Вам нужно добавить класс .row с .form-group, как указано в документации, а затем использовать классы .col-* в полях формы.

<form class="compact">
        <section class="form-block">
          <div class="form-group row">
            <div class="col-md-2 col-sm-6 col-xs-12">
              <label for="aForm_1">This is a form field</label>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <input type="text" id="aForm_1" class="form-control" placeholder="Enter value here" size="45">
            </div>

            <div class="col-md-2 col-sm-6 col-xs-12">
              <label for="aForm_2">Overlapping Text</label>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <input type="text" id="aForm_2" class="form-control" placeholder="Enter value here" size="45">
            </div>
          </div>
        </section>
      </form>

Также обратите внимание, что я добавил класс .form-control к input, так как это заставляет input занимать все назначенное ему пространство .col-*.

person takeradi    schedule 06.09.2017