jQM - Slider inside a listview

by Dragan Gaić

HTML

<div data-role="page" id="settings">
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false"> <a href="#" data-transition="slide" data-rel="back" onclick="console.log('Going back!');"
        data-icon="arrow-l">Back</a>

         <h1 class="content-header">Settings</h1>

    </div>
    <div data-role="content" class="settings-content">
        <form id="Food">
            <ul data-role="listview">
                <li data-role="fieldcontain" class="ui-li">
                    <div>
                        <label class="ui-label" for="0">Afghan</label>
                    </div>
                    <div id="slider-container">
                        <select name="0" id="0" onchange="saveSelect(this,'Food',0);" data-role="slider"
                        data-mini="true">
                            <option value="0">No</option>
                            <option value="1" undefined>Yes</option>
                        </select>
                    </div>
                </li>
                <li data-role="fieldcontain" class="ui-btn ui-li ui-btn-inner">
                    <div>
                        <label class="ui-label" for="1">African</label>
                    </div>
                    <div id="slider-container">
                        <select name="1" id="1" onchange="saveSelect(this,'Food',1);" data-role="slider"
                        data-mini="true">
                            <option value="0">No</option>
                            <option value="1" selected="selected">Yes</option>
                        </select>
                    </div>
                </li>
                <li data-role="fieldcontain" class="ui-btn ui-li ui-btn-inner">
                    <div>
                        <label class="ui-label" for="2">Senegalese</label>
                    </div>
                    <div id="slider-container">
                        <select name="2" id="2" onchange="saveSelect(this,'Food',2);"...

CSS

#slider-container {
    position: relative;
    float:right;  
    margin-top: -10px !important;    
}

#slider-container .ui-slider {
    margin-top: -50px !important;
}