Überlappender Text bei horizontaler Größenanpassung des Browsers in Clarity 0.9.14

Question

Formularfelder überschneiden sich, wenn die Viewport-Größe kleiner ist. Gibt es eine Möglichkeit, dass die Formularfelder in der nächsten Zeile einrasten, wenn der Platz nicht ausreicht?

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> 

Hier ist die Plunker: https://embed.plnkr.co/ynfi39fIMk1bc8bSBHAp/

overlapping text

Answer 1

@ X.Vu: Bitte werfen Sie einen Blick auf diese Plnkr: https://plnkr.co/edit/6YhGmFusvo5EdySzxNpn?p=preview

und auch Clarity Forms in Grid Dokumentation hier: https://vmware.github.io/clarity/documentation/forms

Sie müssen die .row Klasse mit .form-group wie in der Dokumentation erwähnt hinzufügen und dann die .col-* Klassen in den Formularfeldern verwenden.

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

Beachten Sie auch, dass ich die .form-control Klasse auf input hinzugefügt haben, wie das macht die input den gesamten .col-* Raum zugewiesen besetzen.