2

I have been struggling with getting this to work properly. I am trying to get the Horizontally grouped select inputs to work, on my mobile site from this page:

http://jquerymobile.com/demos/1.0/docs/forms/selects/

Right now my select boxes look like this:

enter image description here

But when I view the example it looks like this:

enter image description here

My HTML looks like this:

   <fieldset data-role="controlgroup" data-type="horizontal"> 
    <select name="select-choice-month" id="select-choice-month">
        <option>M</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
    <select name="select-choice-day" id="select-choice-day">
        <option>D</option>
        <?php while($c < 32) {
            echo '<option value="'.$c.'">'.$c.'</option>';
            $c++;
        } ?>
    </select>
    <select name="select-choice-year" id="select-choice-year">
        <option>Y</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
    </select>
</fieldset>

And my include scripts look like this:

<link rel="stylesheet"  href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

I've tried copying and pasting the example exactly, and I still get the vertical and not horizontal, what am I doing wrong here?

SSH This
  • 1,864
  • 4
  • 23
  • 41
  • 2
    It looks like there isn't enough space to align all of them horizontally. From their page: "Note that the buttons which trigger the select will resize depending on the currently selected option’s value. Note that browsers without support for display: inline-block; will group the selects vertically, as above." What happens if you tilt the device sideways? – sarcastyx Oct 05 '12 at 05:38
  • 1
    Good point, I was hoping this would be the case. I tilted it sideways and I also tried making all the selections smaller (maybe the select box was made as wide as the longest value), but I am experiencing the same issue. The example on the jQuery mobile site is correct, but the same code on my site isn't working. Good suggestion though. – SSH This Oct 06 '12 at 01:27
  • 2
    Try playing with the `initial-scale`. You can read more about the `viewport` reference here: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html. You can also try what has been mentioned here: http://stackoverflow.com/questions/7152474/confused-on-initial-scale-1-0-iphone-3gs-vs-4. – sarcastyx Oct 06 '12 at 02:00

1 Answers1

3

Ok. So playing around with it some more and I got the select options working as you want it. These were the changes I had:

<meta name="viewport" content="width=device-width, initial-scale=0.9">

Keep in mind that the initial-scale value will change as per the width of your page and design.

Then I changed the select options as follows:

<div data-role="fieldcontain">
    <div data-role="controlgroup" data-type="horizontal">
        <select name="select-choice-month" id="select-choice-month" data-mini="true">
        <option>Month</option>
        <option value="jan">January</option>
        <!-- etc. -->
        </select>

        <select name="select-choice-day" id="select-choice-day" data-mini="true">
        <option>Day</option>
        <option value="1">1</option>
        <!-- etc. -->
        </select>

        <select name="select-choice-year" id="select-choice-year" data-mini="true">
        <option>Year</option>
        <option value="2011">2011</option>
        <!-- etc. -->
        </select>
    </div>
</div>

For some strange reason adding the legend tag inside the controlgroup wrapper breaks the design. Don't know if this is a bug or not. If you want a title for the dropdowns then you can do the following:

<div data-role="controlgroup" data-type="horizontal">
    <div style="font-weight: bold;">Date of Birth</div>

These changes worked for me on my iPhone4, HTC One, and iPad (there is a whole lot more real estate on the iPad, so it was always going to work. But tested it there anyway).

sarcastyx
  • 2,219
  • 17
  • 16