2011-04-24 12 views
6

używam jQuery UI tak:użyciu jQuery UI - ustawienie szerokości na danym polu multiselect

$("#companyType").multiselect({ 
    multiple: false, 
    header: "Type", 
    noneSelectedText: "Type", 
    selectedList: 1 
}); 
$('.ui-multiselect').css('width', '100px'); 

Co chciałbym zrobić, to ustawić .ui-wielokrotny tylko div #companyType. Coś takiego:

$('#companyType.ui-multiselect').css('width', '100px'); 

Czy jest jakiś sposób na zrobienie tego? Dziękujemy!

Odpowiedz

6

Jeśli chcesz ustawić tę konkretną regułę css dla tylko elementów z klasą .ui-multiselect zawartą w div #companyType Myślę, że jquery ui nie ma na to wpływu. Spróbuj tego:

$('#companyType .ui-multiselect').css('width', '100px'); 

Spowoduje to ustawienie width = 100px do wszystkich elementów zawartych w #companyType że posiadają klasę „UI-wielokrotny”

+0

hmm to nie działa. :/ – mtay

+0

W rzeczywistości zdaję sobie sprawę, że nie ustawiłem poprawnie rodzica ... dziękuję, że to zadziałało. – mtay

8
nie

pewien jakiej wersji używasz, ale v1.5 zawiera nowy parametr "classes", który możesz ustawić do stylizowania swojego elementu multiselect.

Sprawdźcie tutaj, w jaki sposób z niego korzystać: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ mówi

Dodatkowa klasa (-y) do zastosowania zarówno do przycisku i menu dla dalszych personalizacji. Oddziel kilka klas spacją. Musisz zakresu CSS rozróżnić przycisk/menu:

przykładu

$("#companyType").multiselect({ 
classes : "myClass" 
}); 

następnie w wykorzystaniu plików CSS:

/* button */ 
.ui-multiselect.myClass {} 

/* menu */ 
.ui-multiselect-menu.myClass {} 
0

Innym prostym sposobem na dodanie szerokość do pola listy wielokrotnego wyboru jest takie jak te Jest to łatwe, niż dodanie innej klasy lub wbudowanego stylu:

$('#companyType .ui-multiselect').width(200); 

Spowoduje to ustawienie z wartością 200 px w określonym polu listy

6

Wypróbuj ten kod za pomocą opcji minWidth. Jest to minimalna szerokość całego widgetu w pikselach. Ustawienie na „auto” spowoduje wyłączenie, a wartość domyślna to: 225

$("#companyType").multiselect({ 
    multiple: false, 
    header: "Type", 
    noneSelectedText: "Type", 
    selectedList: 1 
    minWidth:100 
}); 
+0

Ustawienie właściwości minWidth było dla mnie idealnym rozwiązaniem. – Steve

+0

Najlepsze rozwiązanie. Dzięki! –

0

Dla odniesienia, jeśli chcesz procent dla szerokości (np 100%) stosuje się go w przypadku zmiany rozmiaru okna.

$(window).resize(function() { 
    $('#companyType .ui-multiselect').css('width', '100%'); 
}); 

Można również przypisać go do szerokości Kolejnym elementem dynamicznie:

$(window).resize(function() { 
    $('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width')); 
}); 
Powiązane problemy