Question

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

正确下拉：

下拉列表不正确：

代码：

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

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

Answer 1

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

选项无法包含在选择菜单中。默认情况下，select元素占用的空间最多，可以容纳最大option宽度加下拉箭头。如果容器（在本例中不是浏览器）宽度不足以容纳完整选项width +下拉箭头，则省略号（...）将显示在select元素中。

以下是您的选择：

使用像素约束select宽度。但是，选项窗口将在浏览器中占用尽可能宽的宽度以显示完整的选项内容。如果它超过浏览器宽度，则省略号（...）出现在每个选项的末尾。
跳过本机选择并将其替换为可以使用CSS样式限制的自定义下拉菜单，或者您可以允许内容换行。

Answer 2

在我以前的项目中，即使我有同样的要求。我使用http://gregfranko.com/jquery.selectBoxIt.js/插件来修复它。

这是一个演示 JSFIDDLE

它是一个JQuery插件。

self_contained

Answer 3

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

Answer 4

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>

选择Box Option width Issue

4 个答案: