jsN jsN - 22 days ago 7
jQuery Question

Edit grid percentages in jQuery Mobile

I am trying to make a grid with some form drop downs and text boxes.

I am needing the grid to be 25%, 50%, 25% however I'm finding it impossible to get my head around how the grid system is written.

<fieldset class="ui-grid-b">
<div class="ui-block-a">
<label for="containerPrefix" class="ui-hidden-accessible">Container Prefix</label>
<select name="containerPrefix" id="containerPrefix" data-native-menu="false">
<option>Container Prefix</option>
<optgroup label="30FT Containers">
<option value="UBBU">UBBU</option>
<option value="BOXU">BOXU</option>
<option value="DAWU">DAWU</option>
</optgroup>
<optgroup label="20FT Containers">
<option value="BEAU">BEAU</option>
<option value="BSIU">BSIU</option>
<option value="TTNU">TTNU</option>
<option value="UBCU">UBCU</option>
<option value="XINU">XINU</option>
</optgroup>
</select>
</div>

<div class="ui-block-b">
<label for="containerNumber"></label>
<input name="containerNumber" id="containerNumber" type="text" placeholder="Container Number" />
</div>

<div class="ui-block-c">
<label for="containerCheckNum"></label>
<input name="containerCheckNum" id="containerCheckSum" type="text" placeholder="Check Number" />
</div>
</fieldset>


Any help would be much appreciated.

Answer

Based on the Docs, seems like you just can define the number of columns but not the size of each one with the actual options. But you can always add your own css.

Use the class .ui-grid-c for the fourth column grid making that way each one 25% and with your own CSS change the behavior of the 2nd one like this:

.ui-grid-c.custom > :nth-child(2) {
  width:50%;
}

<fieldset class="ui-grid-c custom">
  <div class="ui-block-a">
    <label for="containerPrefix" class="ui-hidden-accessible">Container Prefix</label>
    <select name="containerPrefix" id="containerPrefix" data-native-menu="false">
      <option>Container Prefix</option>
      <optgroup label="30FT Containers">
        <option value="UBBU">UBBU</option>
        <option value="BOXU">BOXU</option>
        <option value="DAWU">DAWU</option>
      </optgroup>
      <optgroup label="20FT Containers">
        <option value="BEAU">BEAU</option>
        <option value="BSIU">BSIU</option>
        <option value="TTNU">TTNU</option>
        <option value="UBCU">UBCU</option>
        <option value="XINU">XINU</option>
      </optgroup>
    </select>
  </div>
  <div class="ui-block-b">
    <label for="containerNumber"></label>
    <input name="containerNumber" id="containerNumber" type="text" placeholder="Container Number" />
  </div>
  <div class="ui-block-c">
    <label for="containerCheckNum"></label>
    <input name="containerCheckNum" id="containerCheckSum" type="text" placeholder="Check Number" />
  </div>
</fieldset>

Codepen Demo