XF 2.1 [SOLVED] Split row to accomodate two form fields

[asprin]

The following:

<div class="block-container">
     <div class="block-body">
               <xf:numberboxrow name="e_team_num" id="e_team_num" autocomplete="off" maxlength="3"
                        label="# of Teams" explain="The number of participating teams"  required="true" />
                       
               <xf:numberboxrow name="e_match_num" id="e_match_num" autocomplete="off" maxlength="3"
                        label="# of Matches" explain="The total number of matches in the series" required="true" />
      </div>
</div>

results in:


Is there a way I can make them sit side-by-side on a single row? Tried looking at existing templates but wasn't lucky enough to find an example.

 

[marquisite]

You could try experimenting with <xf:numberbox /> instead of <xf:numberboxrow />. You'd then need to wrap the number boxes inside a form row (<xf:formrow></xf:formrow>). This will result in two number boxes within a single form row, however they are stacked rather than side-by-side.

In order to not have the number boxes stacked above/below each other, an inputGroup wrapper element seems to do the trick. Example:

<div class="block-container">
     <div class="block-body">
         <xf:formrow label="# of..." explain="The number of participating teams and total matches in the series." rowtype="input noColon">
             <div class="inputGroup">
                 <label class="inputGroup-text">Teams:</label>
                 <xf:numberbox name="e_team_num" required="true" />
             
                 <span class="inputGroup-splitter"></span>
             
                 <label class="inputGroup-text">Matches:</label>
                 <xf:numberbox name="e_match_num" required="true" /> 
             </div>
         </xf:formrow>
    </div>
</div>

 

[asprin]

Cool. Let me try it out and see how it goes.

EDIT: It works. But overlaps when viewed in smaller viewport (i.e mobile)