Home/ Questions/Q 8167129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:06:22+00:00

I have implenmented drop-down lists Select menus in jQuery Mobile. <div data-role=fieldcontain> <label for=name

  • 0

I have implenmented drop-down lists “Select menus” in jQuery Mobile.

    <div data-role="fieldcontain">
          <label for="name" class="select ui-select" style ="vertical-align:baseline; width:33%; " ><b>Application:</b></label>
          <select name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >

          <option value="EmptyOption">"  "</option> <!--EMPTY OPTION-->
          <option value="Other">Other</option>
          <option value="Other2">Other2</option>
          <option value="Other3">Other 3</option>


          </select>
    </div>

ALL THE OPTIONS ARE SHOWN IN DROP DOWN LIST but there is an issue of alignment of label.

I have used vertical-align:baseline for now. And I tried other alignment attributes also.

But in case of EMPTY OPTION the position of label is changed to down when compared to the other options.

So many select menus in my application are having the same problem.

Some select menus doen’t have any opstrong texttions these are also having the same issue.

<div data-role="fieldcontain">
      <label for="name" class="select ui-select" style ="vertical-align:baseline; width:33%; " ><b>Application:</b></label>
      <select name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >
           <!--NO OPTIONS-->
      </select>
</div>

enter image description here

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the for attribute of your label you should put in the the id of your select (you currently have "name")

    <div data-role="fieldcontain">
          <label for="editWSAppType" class="select ui-select"  ><b>Application:</b></label>
          <select  name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >

          <option value="EmptyOption"></option> <!--EMPTY OPTION-->
          <option value="Other">Other</option>
          <option value="Other2">Other2</option>
          <option value="Other3">Other 3</option>


          </select>
    </div>
    • 0