jQuery Mobile Horizontal Fieldset - Layout Issues

Question

Using jQuery Mobile 1.1, I'd like to horizontally lay out 2 different sets of radio buttons with some text in between. I'm targeting the iPad, so it's a wider display than a phone. Here's the HTML of what I'm trying to do, but it looks like crap on screen with both sets of radio buttons jammed together, and the text appearing to the right of everything:

<fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption1" checked="checked" />
        <label for="rdoOption1">Option 1</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption2" />
        <label for="rdoOption2">Option 2</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption3" />
        <label for="rdoOption3">Option 3</label>
        <label>Sort By:</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
        <label for="rdoSortName">Name</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortDept" />
        <label for="rdoSortDept">Department</label>
    </fieldset>

Thanks,

Andy

Answer 1

It might be a little obtrusive, but have you tried using a 3-column layout, like this:

<div class="ui-grid-b">
<div class="ui-block-a">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption1" checked="checked" />
        <label for="rdoOption1">Option 1</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption2" />
        <label for="rdoOption2">Option 2</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption3" />
        <label for="rdoOption3">Option 3</label>
    </fieldset>
</div>
<div class="ui-block-b">
    <div style="padding-right:0.5em;text-align:right;">
        <label>Sort By:</label>
    </div>
</div>
<div class="ui-block-c">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
        <label for="rdoSortName">Name</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortDept" />
        <label for="rdoSortDept">Department</label>
    </fieldset>
</div>

Initially, I tried using a 2-column layout:

<div class="ui-grid-a">
    <div class="ui-block-a">
        (first fieldset)
    </div>
    <div class="ui-block-b">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Sort By:</legend>
                <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
                <label for="rdoSortName">Name</label>
                ...
             </fieldset>
        </div>
    </div>
</div>

But the second column wasn't putting the legend on the same line as the radio button list. So I tried the 3-column option.

Hope this helps.

Answer 2

The radio buttons need serious coercing to remain inline with text. In this fiddle I have applied

display:inline !important;

to an outside div, and then

float:left;

to an inside div.

http://jsfiddle.net/den232/d56Vp/

Good luck!

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">

<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-c" value="aa"  />
          <label for="radio-view-c">C1</label>
          <input type="radio" name="radio-view" id="radio-view-d" value="bb"  />
          <label for="radio-view-d">D1</label>
        </fieldset>
      </div>
    </div>

      <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>
    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>


  </li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-f" value="aa"  />
          <label for="radio-view-f">A3</label>
          <input type="radio" name="radio-view" id="radio-view-g" value="bb"  />
          <label for="radio-view-g">B3</label>
        </fieldset>
      </div>
    </div>

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->