Question

我的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>

问题在于，当选择“非常非常长的文本”时，组合框变得更宽，显示屏幕的一半表格。

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

有谁知道如何实现这一目标？

Answer 1

工作示例：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;    
}

Answer 2

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

点击此处http://jsfiddle.net/yeyene/vDeKq/2/

由于它是动态的，因此请使用动态设置其宽度。

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

如果您使用的是JQM，则此问题已经解决。

样本http://jsfiddle.net/yeyene/vDeKq/4/

将“选择”组合框设置为固定大小

2 个答案:

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

如果您使用的是JQM，则此问题已经解决。