多行（自动换行）选择选择在角UI选

是否有可能使angular-ui-select选择选择multilined？我知道你不能在传统的选择输入中做到这一点，但在这里它一定是可能的。如果你的CSS大师，在plunker是在这里：http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview 多行（自动换行）选择选择在角UI选

<ui-select ng-model="address.selected" 
      theme="bootstrap" 
      ng-disabled="disabled" 
      reset-search-input="false" 
      style="width: 300px;"> 
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match> 
<ui-select-choices repeat="address in addresses track by $index" 
      refresh="refreshAddresses($select.search)" 
      refresh-delay="0"> 
     <div ng-bind-html="address.formatted_address | highlight: $select.search"></div> 
</ui-select-choices> 
</ui-select>

来源

2014-12-03 ganqqwerty

如果你已经预先格式化，多行文本，你可以使用

{{text}}

标签。 – Rasalom 2014-12-03 13:13:10

第二个例子在plunker中是多行的 – Harsh 2014-12-03 13:14:51

我的意思是这个词在'选择' – ganqqwerty 2014-12-03 13:44:59

这是由于CSS属性空白，这是设置在默认的UI选样式表NOWRAP。

您可以通过添加这对您的自定义CSS改变这种行为：

.ui-select-bootstrap .ui-select-choices-row > a{ 
    white-space: normal; 
}

这将改变的行为的所有用户界面，选择你的页面上。如果你想改变只有一个，你可以在一个div包装它：

<div class="multiline-select"> 
    <ui-select (...)> 
     (...) 
    </ui-select> 
    </div>

，改变你的CSS选择器

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > a{ 
    white-space: normal; 
}

我已付出你的plunkr显示结果 http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview

来源

2015-01-15 10:19:38

在看这个，这似乎不是为引导的工作作风（这是原来的问题？）这似乎与引导它为下拉，而不是生成的框（其中溢出。）

这分叉plunkr表明：

http://plnkr.co/edit/fMMSKuPMZwjgVCfV4n6d?p=preview

注：我改变了这一点：

<ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 200px;">

来源

2015-09-17 15:02:41 chander

对于最近的ui-select版本（我使用0.19.3），它看起来像a元素已被替换为span。

也得到自动换行和边框周围ui-select-match在引导主题正常工作，从.form-control高度防止边境来自各地的新生产线使第二规则应作出准备：

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > span { 
    white-space: normal; 
} 

div.multiline-select .ui-select-bootstrap .ui-select-match > span.btn { 
    white-space: normal; 
    height: auto; 
}

工作从文森特的plunkr分叉和更新，以0.19.3：http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

来源

2017-04-12 19:20:44

多行（自动换行）选择选择在角UI选

回答

相关问题