CODEWITHSUNDEEP
jqueryhtmlformsmobilealignment
nshah
nshah

Reputation: 597

Put two elements on one line jQuery Mobile

I want to put a button right next to a toggle switch, however, the button keeps moving to the second line.

jsFiddle

http://jsfiddle.net/wHSHb/

HTML

<div data-role="fieldcontain">
    <label for="switch">Privacy:</label>
    <select name="switch" id="switch" data-role="slider">
        <option value="0">Private</option>
        <option value="1">Public</option>
    </select>
    <a href="#switchinfo" data-rel="dialog" data-role="button" data-icon="info" data-iconpos="notext">Switch Info</a>
</div>

I tried fixing this problem by putting both in the same fieldcontain. However, this did not fix the issue.

Upvotes: 0

Views: 2778

Answers (2)

Fab V.
Fab V.

Reputation: 1072

Another solution, use a grid layout: http://jsfiddle.net/ZdkTG/2/

<div data-role="fieldcontain">
    <fieldset class="ui-grid-a">
        <div class="ui-block-a">
            <label for="switch">Privacy:</label>
            <select name="switch" id="switch" data-role="slider">
                <option value="0">Private</option>
                <option value="1">Public</option>
            </select>
        </div>
        <div class="ui-block-b"> <a href="#switchinfo" data-rel="dialog" data-role="button" data-icon="info" data-iconpos="notext" class="ui-button-left">Switch Info</a>

        </div>
    </fieldset>
</div>

More: JQuery Mobile - Display An HTML Form Inline

Upvotes: 0

Thanos
Thanos

Reputation: 3059

Have a look here.

.info
{
    float: right;
}

You can also add some margin to position it as you want.Ex: 

margin-right:30%;

Upvotes: 1

Related Questions