Home/ Questions/Q 7433739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:43:12+00:00

I have two problems relating to using Jquery mobile UI framework dropdown selectors when

  • 0

I have two problems relating to using Jquery mobile UI framework dropdown selectors when inside table rows that I am hoping for assistance with

The first relates to the row height. When I put a drop-down selector in a row (that is otherwise formatted identically to surrounding rows), it makes the row height significantly larger than all the other rows – example html and image of the behavior below;

<tr>
<td class="leftcol">
<div data-role="fieldcontain">
<select name="updown" id="updown">
  <option value="THP (psi)">THP (psi)</option>
  <option value="FBHP (psi)">BHP (psi)</option>
</select>
</div>
</td>
<td><input id=thp size="7"  type="number" style="width:85%" value="300" required></td></tr>

Resultant row height behaviour as rendered in iPhone shown below

The second issue I have (with the same data) is that when I turn the phone to landscape, while the tables stretch out nicely, the dropdown list description actually truncates (gets smaller) cutting off some of the value which was otherwise displayed ok in portrait mode – any idea how to prevent?
Resultant table rendering in landscape mode with iPhone

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, look like both your issues are to do with the <div data-role="fieldcontain">

    It applies a class (“ui-field-contain”) which has a 1em vertical margin and theres some media queries to change the width depending on the screen width.

    Take out that dive and you should be good.

    • 0