Multi-gefüttert (word-wrap) wählen Sie Auswahl im angular-ui-wählen Sie

Ist es möglich, die Auswahl in angular-ui-wählen Sie mehrzeilig? Ich weiß, dass Sie nicht tun können, die in herkömmlichen input auswählen, aber auch hier muss es möglich sein. Wenn Sie CSS-guru, der plunker ist hier: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

<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>
  • Wenn Sie Vorformatiert mit mehrzeiligem text, die Sie verwenden können, <pre>{{text}}</pre> - tag.
  • das zweite Beispiel in plunker ist mehrzeilig
  • Ich meine, dass der Zeilenumbruch innerhalb des "choices"
InformationsquelleAutor ganqqwerty | 2014-12-03
  1. 12

    Dies ist aufgrund der CSS-Eigenschaft white-space, das nowrap in Standard-ui-wählen Sie stylesheet.

    Können Sie dieses Verhalten ändern, indem diese Ihre benutzerdefinierten css :

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

    Dieses ändert das Verhalten von all ui-wählen Sie auf Ihrer Seite. Wenn Sie ändern möchten nur eins, Sie können wickeln Sie es in ein div :

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

    und ändern Sie Ihre css-Selektor

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

    Ich haben gegabelt Ihr plunkr zu zeigen das Ergebnis
    http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview

    InformationsquelleAutor Vincent V.
  2. 3

    Für neuere Versionen von ui-select (ich bin mit 0.19.3) es sieht aus wie die a element ersetzt wurde mit span.

    Sich auch um die word-wrap und Grenze, um korrekt zu arbeiten um ui-select-match im bootstrap-theme, die Höhe von .form-control verhindert, dass die Grenze zu gehen, um die neue Leitung, so dass Sie eine zweite Regel gemacht werden sollten:

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

    Arbeiten plunkr Gabel von Vincent und aktualisiert, um 0.19.3: http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

    InformationsquelleAutor Matthew S.
  3. 1

    Im Blick auf diese, scheint es, nicht zu arbeiten, für die bootstrap-Stil (das war die ursprüngliche Frage?) Es scheint, dass mit bootstrap funktioniert es für die drop-down -, aber nicht für das resultierende Feld (wo es überläuft.)

    Diese Gabel plunkr zeigt:

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

    Hinweis: ich änderte diesen:

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