代码之家 › 专栏 › 技术社区 › pradeep kumar

选择框选项宽度问题

bootstrap-4 angular-cli css html

-1

pradeep kumar · 技术社区 · 7 年前

我面临着一个奇怪的问题。我的项目中有多个选择框。某些选择框选项宽度超过了选择框宽度

正确的下拉列表:

下拉列表不正确:

代码:

<div class="form-group">
  <label id="lbl_crms_customer_add_sector_title">{{'CRMS.CUSTOMER.FORM_LABEL.SECTOR' | translate}}</label>   <span class="inactive_text"> *</span>
    <select id="lbl_crms_customer_add_sector_value" class="custom-select" #sector="ngModel" name="sector" [ngModel]="BasicInfoDetails.sector">
      <!-- <option selected value="">--</option> -->
      <option *ngFor="let sectorobj of sectorList" value="{{sectorobj}}">{{sectorobj}}</option>                            
    </select>
  <span><input-errors [control]="sector"></input-errors></span>
</div>

注意:这些选项是从服务器动态加载的。期待你们最快的回答:)

4 回复 | 直到 7 年前

scooterlord 7 年前

这根本不是一种奇怪的行为。这就是它的工作方式。

选项不能包装在选择菜单中。这个 select 默认情况下,元素会占用最大的可用空间来容纳最大的 option 宽度加带有的下拉箭头。如果容器 (本例中不是浏览器)宽度不足以容纳完整选项宽度+下拉箭头,省略号(…)出现在 选择 要素

以下是您的选择:

约束 选择 使用像素的宽度。但是,“选项”窗口将在浏览器中占据尽可能大的宽度,以显示完整的选项内容。如果超过浏览器宽度,则省略号(…)显示在每个选项的末尾。
跳过本机选择,将其替换为定制的下拉菜单,可以使用CSS样式进行限制,也可以允许内容包装。

shubham agrawal 7 年前

在我以前的项目中,甚至我也有同样的要求。我用过 http://gregfranko.com/jquery.selectBoxIt.js/ 插件来修复它。

这是一个演示 JSFIDDLE

它是一个JQuery插件。

$(function() {

  $("#testselectset").selectBoxIt({
    theme: "default",
    defaultText: "Make a selection...",
    autoWidth: false
  });
  $("#testselectset").change(function() {
    alert("You selected: " + this.value + " from the Selectboxit plugin");
  });

});

Help Programmers 7 年前

它们可能会超过,因为第二个选择选项在一行中有更多内容。默认情况下,元素的大小取决于最大文本的大小

-1

Help Programmers 7 年前

Chech this code

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Increase Select Box Size on Focus</title>
<style type="text/css">
    select {
        width: 150px;
        margin: 10px;
    }
    select:focus {
        min-width: 150px;
        width: auto;
    }    
</style>
</head>
<body>
    <form>
        <select>
            <option>Choose</option>
            <option>This option is large</option>
            <option>This option is very large</option>
            <option>This option is very very large</option>
            <option>This option is very very very large</option>
        </select>
        <select>
            <option>Choose</option>
            <option>This option is large</option>
            <option>This option is very large</option>
            <option>This option is very very large</option>
            <option>This option is very very very large</option>
        </select>
    </form>
</body>
</html>