Question

i get hard time to get the text and select menu in jquery mobile.

what i got right now is: text in the one line, but select menu on the other line

but i want to make them in the same line

my code is:

<!--camera function starts here-->
            <div data-role="fieldcontain" class="text-field">
                <b>Report your Photo: </b><select id="select-choice" data-native-menu="false"
                    data-inline="true" data-icon="gear" data-theme="a"
                    name="select-choice" tabindex="-1">
                    <option value="None">Add Photo</option>
                    <option id="capturePhotoBnt" value="takePhoto">Take Photo</option>
                    <option id="fromLibrary" value="fromLibrary">From Libray</option>
                </select>

                <div id="image_canvas"></div>
                <span class="imageHelp" style="display: none;"><font
                    color="red">Please take a photo !</font></span>
            </div>

any suggestion will be a good help, thanks.

Answer 1

Try setting the CSS for the select to this:

/* in a CSS Stylesheet*/
select#select-choice {
    display: inline;
}

<!-- as an inline style -->
<select id="select-choice" style="display: inline;" data-native-menu="false" data-inline="true" data-icon="gear" data-theme="a" name="select-choice" tabindex="-1">

//or through jQuery
$('select#select-choice').css('display', 'inline');

Assuming that the select is not already set to an inline display, that should fix it. As this is a mobile application, I have to ask: “Is the display wide enough to display both the text and the select side-by-side?”

You may have to play around with font-sizes and widths to get both to fit on the same line.