如何禁用选择选项以自动增大?

时间:2014-03-09 06:00:22

标签: jquery html jquery-mobile

选择选项会根据字符串的大小在我的移动应用程序中自动增长如何限制它以便将其固定为一个大小,并且其中的字符将完全显示(小字体是可以的)。

问题:我想根据屏幕尺寸限制尺寸,不允许在我的应用中进行水平/'垂直滚动

<div data-role="fieldcontain" >
            <fieldset class="ui-field-contain" data-role="controlgroup">

  <select>
  <option></option>
  <!-- etc -->
  </select>

  </fieldset>
</div>

1 个答案:

答案 0 :(得分:0)

您可以将CSS应用于“select”元素,以确保它是一个恒定的大小。

将以下内容添加到“head”(如果您还没有导入的CSS文件):

<style>
    select {
        width:300px;
    }
</style>

您可以将宽度设置为您想要的宽度。

如果你想在一个小空间内支持非常大的字符串而不滚动,你别无选择,只能收缩字体。保持所有字体大小相同而不是在同一个选择框中有各种各样的字体可能更有意义,所以你可以简单地将它添加到你的“样式”元素:

select {
    width:300px;
    font-size:12px;
}

...或者你想要字体的大小。

您的容器也应调整大小。你应该给它一个“id”或“class”然后我建议你应用“max-width”:

<div id="select-container" data-role="fieldcontain" >
    <fieldset class="ui-field-contain" data-role="controlgroup">
        <select>
            <option></option>
            <!-- etc -->
        </select>
    </fieldset>
</div>

然后在你的CSS中:

#select-container {
    max-width:300px;
}

......或者你想要容器的大小。使用“max-width”,容器的最小宽度应略大于它所包含的“select”的大小。