• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] SelectBoxIt mit verschiedenen Breiten

C

Ciatronical

New member
Hey All,

um Auswahllisten im UI-Style zu gestalten benutze ich SeletBoxIt

Mit
Code: 
 .selectboxit-container .selectboxit-options {width: 150px;}

kann ich die Breite der Auswahlliste definieren.

Die Breite gilt dann jedoch leider für sämtliche Auswahllisten.
Wie kann ich für jede eintzelne Auswahlliste eine eigene Breite definieren.

Hier noch etwas Code

Code: 
 $("select").selectBoxIt({
    theme: "jqueryui",
    autoWidth: true,
 })


Code: 
<select class="b1" name="searchtab" id="searchtab">
            <option value="1">.:fastsearch:.
            <option value="2">.:customers:.
            <option value="3">.:vendors:.
            <option value="4">.:persons:.
</select>


VG Ronny
 
Auf der Seite die du verlinkt hast gibt es einen Custom Download wo man sein eigenes CSS bauen kann.
Geht das nicht?
 
Mit
Code: 
 .selectboxit-container .selectboxit-options {width: 150px;}
kann ich die Breite aller Auswahllisten ändern.

Es sollte doch irgendwie möglich sein, ID's mit den oben genannten Klassen zu kombinieren.

Oder kann man die Klassen in der folgenden Funktion ändern, anhängen??

Code: 
$("select").selectBoxIt({
   theme: "jqueryui",
   autoWidth: true,
})
 
Was ist mit dem Custom Download?
Über Parameter theme: "jqueryui", kannst du das doch dann bestimmt anders addressieren.
 
Bei Custom Download kann man bei CSS nichts auswählen.

theme: "jqueryui" wendet dann das UI-Thema an.

Oder wie meinst Du das??

Ich kann ja die Breite ändern, doch leider nur für alle Auswahllisten.

Ich brauce verschidene Größen
 
Zuletzt bearbeitet:
Ah sorry. Hab falsch geguckt. Dachte, man könnte dort in das Feld eigenes CSS ergänzen und das Tool würde das dann einarbeiten. Ist aber leider nicht.

Noch ein Versuch: Erst das Feld aufbauen lassen und dann mit JS gezielt die CSS Eigenschaft ändern. Das mal versucht?
 
Ja daran dachte ich auch schon.
Ich weiss jedoch nicht wie das syntaktisch aussieht.

Code: 
$("#select_id").selectBoxIt({
   theme: "jqueryui",
   autoWidth: true,
}).css(.selectboxit-container .selectboxit-options {width: 17px;}) ??
 
document.getElementById('searchtab').style.width = '150px';
Wenn das klappt können wir das auch in jQuery Syntax umformulieren.
 
Nein leider nicht. Kann man nicht vor dem CSS eine ID angeben??

searchtab?selectboxit-container .selectboxit-options {width: 170px;}
andere_id?selectboxit-container .selectboxit-options {width: 170px;}
 
Findest du es selbst nicht merkwürdig, dass sich eine Eigenschaft nicht ändern lässt? Hast du Meldungen in der Fehlerkonsole?
 
Ja, dann stimmt die ID nicht oder das Element ist zu diesem Zeitpunkt noch nicht da.
Du musst das neue ganz ans Ende setzen.
 
Hatte es in document.ready

Im Footer kommt keine Fehlermeldung mehr doch die Breite ändert sich trotzdem nicht.

Auch dann nicht wenn ich
Code: 
width: 220px
im selectBoxIt.css kommentiere.

Ich werde mal ein Testscript schreiben.
 
Du könntest im CSS auch mal das probieren:
Code: 
#ID_DEINES_SELECTS + .selectboxit-container .selectboxit-options {
	width: 350px;
}
 
Ich habe mal ein kleines Testfile geschrieben.
Code: 
        <!doctype html>
        <html>
        <head>
          <meta charset=utf-8>
          <title>SelectBoxIt demo</title>
          <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
          <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
          <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
          <link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
          <style type="text/css">
            .selectboxit-container .selectboxit-options {width: 400px;} /*Breite einstellen*/
          </style>       
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
          <script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
          <script>
          $(document).ready(function(){
            $("select").selectBoxIt({
                theme: "jqueryui",
                autoWidth: true
            })
          });
          </script>
        </head>
        <body>

          <select name="select1" id="select1">
            <option value="select1 wert1">select1 wert1</option>
            <option value="select1 wert2" selected>select1 wert2</option>
            <option value="select1 wert3">select1 wert3</option>
            <option value="select1 wert4">select1 wert4</option>
          </select>
          <select name="select2" id="select2">
            <option value="select2 wert1">select2 wert1</option>
            <option value="select2 wert2">select2 wert2</option>
            <option value="select2 wert3" selected>select2 wert3</option>
            <option value="select2 wert4">select2 wert4</option>
          </select>
        <script type="text/javascript" >
            document.getElementById('select2').style.width = '150px';
        </script>

        </body>
        </html>
 
Mein Ansatz sollte eigentlich gehen, wird aber irgendwie durch das Skript unterminiert. Das funktioniert aber:
Code: 
#select1SelectBoxItContainer.selectboxit-container .selectboxit-options {
	width: 200px;
}
 
Hey super,

könntest Du vielleicht kurz erklären was das für ein Selektor ist.
Kann man so auch mehere ID's oder gar Klassen selektieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben