GoldenLine
Zaloguj się
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Witam.

Natrafiłem dziś na spory problem z którym nie mogę sobie poradzić. Rozwiązanie by select'y czy input'y zachowywały się jak zwyczajne elementy blokowe (dostosowywały swoją szerokość do wolnej przestrzeni) jest dość proste i powszechnie znane (jeśli ktoś nie zna - http://boulderinformationservices.wordpress.com/2011/0.... Tak to wygląda w praktyce: http://jsfiddle.net/evc54/1/

Schody zaczynają się dopiero gdy zechcemy użyć niestandardowych select list - w moim przypadku jest to plugin gallery-itsaselectlist z frameworka Yahoo YUI... Wyżej zaprezentowane rozwiązanie wymaga nadania overfow: hidden dla wrappera w którym znajduje się lista rozwijana. Oczywiście to powoduje, że elementy listy są ucinane i nie są widoczne... Macie może pomysł jak można to obejść (bez użycia JS - takie rozwiązanie mam już gotowe)> Tak to wygląda: http://jsfiddle.net/evc54/2/

Z góry dziękuję za wszelkie sugestie i pomysły! :)

EDIT: Przepraszam za tytuł, jest trochę nie po polsku ale nie mogę go już edytować.Ten post został edytowany przez Autora dnia 10.12.13 o godzinie 16:31
Link do wypowiedziLink

konto usunięte

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Ogólnie przy wszelakich float'ach i fix'ach dobrze mieć w arkuszach coś do zerowania (ja osobiście korzystam zawsze z Bootstrapowego clearfix'a).

Nie wiem czy o taki efekt chodziło: http://jsfiddle.net/evc54/4/
Link do wypowiedziLink
Artur Kwiatkowski

Artur Kwiatkowski Front-end developer

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Zerowanie na moje oko działa aczkolwiek zastanawia mnie jeszcze czy on tam zamiast overflow: hidden; nie powinien mieć po prostu overflow-x:hidden; no bo stosowanie overflow na wysokość przy liście rozwijanej to trochę strzelanie sobie w stopę czysto teoretycznie oczywiście bo ta funkcjonalność po stronie jquery może sobie z tym jakoś radzić.
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Marcin Z.:
Ogólnie przy wszelakich float'ach i fix'ach dobrze mieć w arkuszach coś do zerowania (ja osobiście korzystam zawsze z Bootstrapowego clearfix'a).

Nie wiem czy o taki efekt chodziło: http://jsfiddle.net/evc54/4/

Nie do końca... Ustawiłeś prawy padding dla .sizer'a na sztywno. Po wydłużeniu tekstu wewnątrz buttona lista spada do kolejnej linii... Chcę mieć dokładnie taki sam efekt jak tutaj: http://jsfiddle.net/evc54/2/ (dodaj jakiś tekst do buttona by zobaczyć o co mi dokładnie chodzi) ale bez użycia overflow: hidden; by nie przycinało mi opcji wyboru...
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Artur K.:
Zerowanie na moje oko działa aczkolwiek zastanawia mnie jeszcze czy on tam zamiast overflow: hidden; nie powinien mieć po prostu overflow-x:hidden; no bo stosowanie overflow na wysokość przy liście rozwijanej to trochę strzelanie sobie w stopę czysto teoretycznie oczywiście bo ta funkcjonalność po stronie jquery może sobie z tym jakoś radzić.

overflow-x: hidden; działa tak, że rzeczywiście w poziomie wszystko poza kontenerem jest ucinane ale pion (nawet po dodaniu overflow-y: visible;) zachowuje się jak scroll, a nie visible...Ten post został edytowany przez Autora dnia 11.12.13 o godzinie 09:45
Link do wypowiedziLink
Roch Szatan

Roch Szatan As

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Lepiej korzystać z https://github.com/necolas/normalize.css/ niż z resetów.
http://jsfiddle.net/7pTH3/ formularze to był zawsze problem bo wszędzie działają jak chcą. Wszystkie rozwiązania mi znane są na silę i obecnie jest trend aby nie stylizować czegoś na siłę dlatego normaizer dlatego bootstrap nie stylizuje http://getbootstrap.com/css/#forms-control-sizes
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Może to naprowadzi Cię na kompletne rozwiązanie. Ja nie bardzo mam teraz czas głębiej w tym grzebać, ale zaciekawiło mnie co gdy elementowi .itsa-selectlist-basediv zmienimy z lekka pozycjonowanie na relatywne.


.itsa-selectlist-basediv {

 position: relative !important;

}

http://jsfiddle.net/evc54/23/
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Grzegorz W.:
Może to naprowadzi Cię na kompletne rozwiązanie. Ja nie bardzo mam teraz czas głębiej w tym grzebać, ale zaciekawiło mnie co gdy elementowi .itsa-selectlist-basediv zmienimy z lekka pozycjonowanie na relatywne.
...
http://jsfiddle.net/evc54/23/

Ale wtedy nasz dropdown zaczyna się zachowywać jak accordion menu, czyli lista po kliknięciu nie pojawia się nad contentem poniżej tylko przesuwa go w dół... http://jsfiddle.net/evc54/25/
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

Michał S.:
Lepiej korzystać z https://github.com/necolas/normalize.css/ niż z resetów.
Sprawa dyskusyjna na odddzielny temat ;)
http://jsfiddle.net/7pTH3/ formularze to był zawsze problem bo wszędzie działają jak chcą. Wszystkie rozwiązania mi znane są na silę i obecnie jest trend aby nie stylizować czegoś na siłę dlatego normaizer dlatego bootstrap nie stylizuje http://getbootstrap.com/css/#forms-control-sizes
Jasne, że są problemy przy stylowaniu formularzy, ale nie jest to zależne ode mnie w tym przypadku. Co do Twojego przykładu to nie jest to o co mi chodzi, zobacz co się dzieje jeśli wydłużymy tekst buttona - http://jsfiddle.net/7pTH3/2/ Powinno być tak i to działa bez zarzutu - http://jsfiddle.net/7pTH3/3/- ale... standardowy select ma gdzieś overflow: hidden; i pomimo niego zostaje wyświetlony poprawnie (nie są ucinane opcje wyboru), w przypadku użycia dropdown'a z YUI lub innego rozwiązania które na dobrą sprawę przebudowuje całą listę rozwijaną robiąc z opcji wybory div'a, ul'a czy jakikolwiek inny element nie mogę znaleźć sposobu (bez użycia JS) na wyeliminowanie przycinania listy...
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skalowanie szerokości select'a w zależności od rozmiaru...

OK. Jako, że w przypadku braku JS całość działa poprawnie bo customowy select ma gdzies overflow: hidden; postanowiłem, że skoro nie jestem w stanie znaleźć rozwiązania w czystym CSS-ie, użyję rozwiązania w JS. Rozwiązanie polega na tym, że w momencie kliknięcia slececta (nie wygenerowania ponieważ, niektóre selecty w projekcie nie są widoczne od razu, a co się z tym wiąże ich rozmiar nie jest poprawnie obliczany) ustawiam mu szerokość którą obecnie zajmuje i nadaję overflow: visible;

Rozwiązanie z JS: http://jsfiddle.net/evc54/26/

Jestem nadal otwarty na rozwiązanie z wykorzystaniem samego CSS jeśli komuś uda się takowe odnaleźć! :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj