0

我的 JQuery 移动网页（用于 Android 应用程序）的一部分如下所示：

<table style="width:100%">
//here are some other rows with other input fields
<tr>
  <td>Combobox:</td>
  <td>
    <select id="sl_bnd">
      <option value="0">Very very very long text</option>
      <option value="1">Shorty</option>
    </select>
  </td>
</tr>

The problem is that when the "Very very very long text" is selected, the combobox becomes wider showing half of the table out of the screen.

我想要的是将组合框设置为固定的初始大小（这是动态的，因为屏幕可能具有不同的分辨率）。

有谁知道如何做到这一点？

4

2 回答 2

2

工作示例：http: //jsfiddle.net/Gajotres/HZAnz/

只需使用简单的 CSS：

.ui-select, #sl_bnd, #sl_bnd option {
    width: 200px !important;
}

你甚至可以使用百分比：

.ui-select, #sl_bnd, #sl_bnd option {
    width: 80% !important;
}

或者如果您想更改特定选择：

#custom-select .ui-select, , #sl_bnd, #sl_bnd option {
    width: 200px !important;    
}

主要是用来!important覆盖默认值。

如果您只想更改选项宽度，只需使用此 css：

#sl_bnd, #sl_bnd option {
    width: 200px !important;    
}
于 2013-07-03T07:14:43.930 回答
1

如果您使用的是响应式移动网站，

检查这里http://jsfiddle.net/yyene/vDeKq/2/

由于它是动态的，因此将其宽度设置为动态。

$('#sl_bnd').css({
    'float':'left',
    'width': ($(window).width()-$('#c_label').width()-20)+'px' 
});

如果你使用的是 JQM，这个问题已经解决了。

演示http://jsfiddle.net/yyene/vDeKq/4/

于 2013-07-03T07:12:41.063 回答