it-swarm.com.de

Chosen.js Styling entspricht nicht den Bootstrap3-Styles

Ich verwende chosen.js v1.0 und verwende es in meinem Projekt mit Bootstrap 3, aber die Stile meiner Auswahlfelder stimmen überhaupt nicht mit den Bootstrap 3-Stilen überein.

Mache ich etwas falsch? Ich habe einfach die Auswahlfelder mit aufgerufen
$('#select-input').chosen(); richtig?

enter image description here

23
cyberjar09

Tatsächlich gibt es jemanden, der ein Bootstrap 3.0 CSS-Design für Chosen erstellt hat.

Einige Bildschirme:

enter image description here

enter image description here

enter image description here

Das Thema ist in dieser Github-Ausgabe verfügbar. Verwenden Sie unten Gist.


Bearbeiten

Ich habe a Fiddle erstellt, wobei derselbe HTML-Code wie für die offizielle Seite der gewählten Dokumentation verwendet wird und das Bootstrap-Design angewendet wird. (fügte form-control zu allen ausgewählten Elementen hinzu und entfernte style="width:350px;")

Außerdem werde ich das Thema in diesem Gist beibehalten: https://Gist.github.com/koenpunt/6424137

50
Koen.

Ein alternatives Stylesheet für Chosen 1.0. Dieser sollte besser mit Bootstrap 3.0 integriert werden.

Erhältlich hier http://alxlit.github.io/bootstrap-chosen/

screenshot of chosen alternative

13
Subtletree

Es gibt auch ein anderes alternatives Thema, das Bootstrap 3 unterstützt: https://github.com/dbtek/chosen-bootstrap .

Sieht aus wie native Eingaben bs.

chosen-bootstrap

6
dbtek

Wenn Sie die Auswahlfeldgrößen ändern möchten, können Sie Folgendes verwenden:

[class*="col-"] .chosen-container {
    width:98%!important;
}
[class*="col-"] .chosen-container .chosen-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .chosen-container .chosen-drop {
    width: 100%!important;
}

Quelle: https://github.com/harvesthq/chosen/issues/1004

0
Alireza Fattahi

Chosen.js (selected.css) und das Bootstrap-CSS fügen CSS-Stile zu Ihren Eingaben hinzu (selects). Versuchen Sie, chose.css nach bootstrap.css zu laden:

  <link rel="stylesheet" href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css">
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>

Siehe dazu: Rechter Rand des AddThis-Indikators fehlt bei Twitter's Bootstrap 3 . Es scheint, dass der universelle Selector des CSS, die Box-Größe auf Border-Box zu setzen, die meisten Probleme verursacht hat.

Um dies zu beheben, setzen Sie die Box-Größe der ausgewählten Elemente () zurück:

Im Fall von $('#select-input').chosen(); legen Sie außerdem Folgendes fest: 

#select-input
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

Hinweis: In der Voreinstellung selected.js ist eine alte Version von jQuery enthalten. Für Twitter Bootstrap (Javascript) ist die neueste Version (<2) von jQuery erforderlich

0
Bass Jobsen