2011-10-07 26 views
0

的寬度和高度我有一個問題之前定位分組選擇幸好得到修復。現在我遇到了調整大小的問題,調整了分組選擇的寬度/高度。如果有人能幫助我,我將不勝感激。下面是我的代碼...jQuery Mobile的:調整分組選擇

這是我的代碼將它定位在屏幕上,即使我到這個寬度和高度,好像它沒有更新。我還注意到,寬度根據所選項目的長度而改變。例如當我選擇「九月」時,分組選擇的寬度比「三月」長。

$("#ui-5").css({'position':'absolute','left':'6.0px','top':'57.0px'}); 

這是實際物體的代碼

<div id="ui-5"> 
<div class="ui-select" data-role="controlgroup" data-type="horizontal" > 
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_0" name="Datepicker_0_0"> 
     <option value="1">January</option> 
     <option value="2">February</option> 
     <option value="3">March</option> 
     <option value="4">April</option> 
     <option value="5">May</option> 
     <option value="6">June</option> 
     <option value="7">July</option> 
     <option value="8">August</option> 
     <option value="9">September</option> 
     <option value="10">October</option> 
     <option value="11">November</option> 
     <option value="12">December</option> 
    </select> 
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_1" name="Datepicker_0_1"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     <option value="14">14</option> 
     <option value="15">15</option> 
     <option value="16">16</option> 
     <option value="17">17</option> 
     <option value="18">18</option> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
     <option value="22">22</option> 
     <option value="23">23</option> 
     <option value="24">24</option> 
     <option value="25">25</option> 
     <option value="26">26</option> 
     <option value="27">27</option> 
     <option value="28">28</option> 
     <option value="29">29</option> 
     <option value="30">30</option> 
     <option value="31">31</option> 
    </select> 
    <select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="Datepicker_0_2" name="Datepicker_0_2"> 
     <option value="1">1975</option> 
     <option value="2">1976</option> 
     <option value="3">1977</option> 
     <option value="4">1978</option> 
     <option value="5">1979</option> 
     <option value="6">1980</option> 
     <option value="7">1981</option> 
     <option value="8">1982</option> 
     <option value="9">1983</option> 
     <option value="10">1984</option> 
     <option value="11">1985</option> 
     <option value="12">1986</option> 
     <option value="13">1987</option> 
     <option value="14">1988</option> 
     <option value="15">1989</option> 
     <option value="16">1990</option> 
     <option value="17">1991</option> 
     <option value="18">1992</option> 
     <option value="19">1993</option> 
     <option value="20">1994</option> 
     <option value="21">1995</option> 
     <option value="22">1996</option> 
     <option value="23">1997</option> 
     <option value="24">1998</option> 
     <option value="25">1999</option> 
     <option value="26">2000</option> 
     <option value="27">2001</option> 
     <option value="28">2002</option> 
     <option value="29">2003</option> 
     <option value="30">2004</option> 
     <option value="31">2005</option> 
     <option value="32">2006</option> 
     <option value="33">2007</option> 
     <option value="34">2008</option> 
     <option value="35">2009</option> 
     <option value="36">2010</option> 
     <option value="37">2011</option> 
     <option value="38">2012</option> 
     <option value="39">2013</option> 
     <option value="40">2014</option> 
     <option value="41">2015</option> 
     <option value="42">2016</option> 
     <option value="43">2017</option> 
     <option value="44">2018</option> 
     <option value="45">2019</option> 
     <option value="46">2020</option> 
     <option value="47">2021</option> 
     <option value="48">2022</option> 
     <option value="49">2023</option> 
     <option value="50">2024</option> 
     <option value="51">2025</option> 
     <option value="52">2026</option> 
     <option value="53">2027</option> 
     <option value="54">2028</option> 
     <option value="55">2029</option> 
     <option value="56">2030</option> 
     <option value="57">2031</option> 
     <option value="58">2032</option> 
     <option value="59">2033</option> 
     <option value="60">2034</option> 
     <option value="61">2035</option> 
     <option value="62">2036</option> 
     <option value="63">2037</option> 
     <option value="64">2038</option> 
     <option value="65">2039</option> 
     <option value="66">2040</option> 
     <option value="67">2041</option> 
     <option value="68">2042</option> 
     <option value="69">2043</option> 
     <option value="70">2044</option> 
     <option value="71">2045</option> 
     <option value="72">2046</option> 
     <option value="73">2047</option> 
     <option value="74">2048</option> 
     <option value="75">2049</option> 
     <option value="76">2050</option> 
    </select> 
</div></div> 

UPDATE 經過一番實驗,這是解決jsfiddle

回答

3

添加這種風格在你的CSS

#Datepicker_0_0-button{ 
    width:200px; 
} 

這應該是這樣定義它 - #<id of your select>-button{}

+0

#-button <你選擇的ID> {}你的意思#UI-5鍵{}? –

+0

no..id選擇element.For 1的選擇是正確的Datepicker_0_0。 – user700284

+0

我試圖$( 「#UI-5的.ui選#Datepicker_0_0」)的CSS({ '寬度': '600像素'});。和$(「#Datepicker_0_0」)。css({'width':'600px'});但他們似乎沒有工作。即使我不加入它的CSS這個JavaScript應該改變其外觀後加載對象的權利?但它不起作用 –