Overlapping text when resizing the browser horizontally in Clarity 0.9.14

Question

Form fields overlap when the Viewport size is smaller. Is there a way that the form fields snap on the next line when the space is not enough?

Code Snippet:

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

Here is the plunker: https://embed.plnkr.co/ynfi39fIMk1bc8bSBHAp/

overlapping text

Answer 1

@X.Vu: Please take a look at this Plnkr: https://plnkr.co/edit/6YhGmFusvo5EdySzxNpn?p=preview

and also the Clarity Forms in Grid documentation here: https://vmware.github.io/clarity/documentation/forms

You need to add the .row class with .form-group as mentioned in the documentation and then use the .col-* classes on the form fields.

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

Also notice that I have added the .form-control class on input as that makes the input occupy the entire .col-* space assigned to it.