CODEWITHSUNDEEP
javascriptjqueryhtmliphonejquery-mobile
user2066880
user2066880

Reputation: 5024

Format label and toggle switch on same line in JQuery Mobile

I'm trying to find the Javascript equivalent of creating the following html element:

<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

This puts the label on the same line.

Here is my attempt, but the label sits underneath the toggle switch. I don't know the JQuery method for formatting the data-role="fieldcontain" div.

http://jsfiddle.net/2ckHr/13/

HTML

<div data-role="content" id="content">
</div>

JS

$('<div data-role="fieldcontain"><label>Label</label><select class="flip" name="flip-1" id="flip-1" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></div>').appendTo($("#content"));

$(".flip").slider();

$('<button id="submit">Submit</button>').appendTo($("#content")).button();

$(document).delegate("#submit", "vclick", function() { alert($("#flip-1").val()); });

Upvotes: 1

Views: 3606

Answers (1)

Sga
Sga

Reputation: 3658

The easiest, inline way, is to add some CSS to the label:

<label for="slider" style="display: inline; vertical-align: 1.2em;">Select slider:</label>

this can be factored in a CSS class, minding display override:

 .switchlabel { display: inline !important; vertical-align: 0.8em; }

If calculating vertical-align value is not feasible, you have to change styles after control creation. You have to add vertical-align: middle; to this element (created by jQuery Mobile):

<div role="application" class="ui-slider ui-slider-switch ...

Upvotes: 2

Related Questions