Question

I have a problem in with setting up 3 lists to go side by side to each other in jQuery Mobile. I can’t use ui-grid unfortunately because I have a script that hides them and based on the number from 0-3 (this is another list), the same number of lists will appear (I have the lists to be dynamically centered). Also, I can’t use data-role=”fieldcontain” because each list should have round edges according to my boss (the middle list has sharp edges). Here is my code:

<div class="centerplease">
   <div id="A1">
   @Html.DropDownListFor(x => x.ChildAge_A1, ChildAge,
   new { data_mini = "true", data_inline = "true", data_icon = "false"})</div>

   <div id="A2">
   @Html.DropDownListFor(x => x.ChildAge_A2, ChildAge,
   new { data_mini = "true", data_inline = "true", data_icon = "false"})</div>

   <div id="A3">
   @Html.DropDownListFor(x => x.ChildAge_A3, ChildAge,
   new { data_mini = "true", data_inline = "true", data_icon = "false"})</div> 
</div>

Thanks for your help!

Answer 1

This fiddle might help:

http://jsfiddle.net/dhavaln/y8JAs/

I have put following css to align the select boxes together.

.ui-select{
    float: left;
    width: 33%;
}​