Odpowiedz

Ostylowanie rozwijalnej listy - tabulatory

Krzysztof Janda Student, University
Of Wales

Temat: Ostylowanie rozwijalnej listy - tabulatory

Mam mały problem z listą rozwijalną. Potrzebuję listy, która zamknięta będzie pokazywać jedynie kod produktu, a rozwinięta np. kod - produkt. Jednak w zawartości option, jak wiadomo, nie można wstawiać żadnych znaczników, którymi mógłbym ustawić np. marginesy. Próbowałem wstawić znak tabulatora (ze średnikiem), ale jest interpretowany jako spacja, nawet jak ustawię white-space na pre. Szerokość pola, tak żeby wyświetlało tylko x znaków też nie jest dobrym pomysłem, bo kody nie są jednakowej długości, a pola muszą być. Jest jakiś sposób, aby to zrobić w prosty sposób, bo wstawianie nbsp w każdym option, żeby odpowiednio przesunąć zawartość to syzyfowa praca?

Przykład kodu jednej z list (tutaj nawet w jednej liście są różne długości kodów):

<select name="p01-08">

  <option value="ww">WW - wysokość wnęki</option>

  <option value="wws">WWS - wysokość wnęki + skrzynka</option>

</select>

26.10.2011, 15:43

Link do wypowiedzi

| Cytuj

Łukasz Stępa wszelakopojęty
html/css

Temat: Ostylowanie rozwijalnej listy - tabulatory

jesli chodzi o marginesy czy paddingi - próbowałeś je ustawić po prostu na option? wydaje mi się że powinno łapać. (wątpie żeby starsze IE łapały czy Opera - nie wiem nie testowałem :) )

Co do produkt / kod - produkt to nie za bardzo rozumiem. Może łatwiej było by na ul li? albo na dl dt? z jakimś rozwijanym skryptem.

Osobiście nie bawiłbym się w stylowanie selectów i optionów - stracisz na to całe wieki a i tak nie będzie wszędzie dobrze :)

26.10.2011, 19:47

Link do wypowiedzi

| Cytuj

Krzysztof Janda Student, University
Of Wales

Temat: Ostylowanie rozwijalnej listy - tabulatory

Właśnie tutaj nie chodzi o czyste marginesy. Bardziej o jakąś tabulację. Co do kod - produkt chodzi mi o coś takiego:

Lista zwinięta:

+----------+

| KOD   |\/|

+----------+

Lista rozwinięta:

+----------+

| KOD   |\/|

+----------+-------+

| KOD - towar      |

| KOD - inny towar |

+------------------+

Jak widać powyżej "- towar" mieści się w widoczności zwiniętej listy, a chcę go "przesunąć" tak, aby na zwiniętej liście był widoczny sam kod. :)

PS. A czy mając ul li mogę wysłać przez formularz dane jak z select - name=value ?

27.10.2011, 00:33

Link do wypowiedzi

| Cytuj

konto usunięte

Temat: Ostylowanie rozwijalnej listy - tabulatory

Stylowanie pól formularza to zawsze syzyfowa praca.
Szczególnie "select" raczej nie powinno sie tego robić.
Ale jak pisał kolega wyżej dać to w "ul li" i to ułatwi ci manipulacje.
http://www.jankoatwarpspeed.com/post/2009/07/28/reinve...

27.10.2011, 08:58

Link do wypowiedzi

| Cytuj

Piotr L. projektowanie user
experience,
interakcji,
architektura i...

Temat: Ostylowanie rozwijalnej listy - tabulatory

Michał Szaniewski:
Stylowanie pól formularza to zawsze syzyfowa praca.
Szczególnie "select" raczej nie powinno sie tego robić.
Ale jak pisał kolega wyżej dać to w "ul li" i to ułatwi ci manipulacje.
http://www.jankoatwarpspeed.com/post/2009/07/28/reinve...

Stylowanie selecta jest dosyć proste - wystarczy nad nim umieścić jakąś rozwijaną JSem UL czy DT ostylowaną według uznania plus nieco "magii" JS do wybierania wartości selecta pod spodem... Nic trudnego.

27.10.2011, 09:06

Link do wypowiedzi

| Cytuj

konto usunięte

Temat: Ostylowanie rozwijalnej listy - tabulatory

Proste no tak średnio, nie jest to tylko selektor {właściwość: wartość;}.
Tylko trochę 'magii' JS i CSS :) Jednak powinno się coś zrobić z specyfikację html-a w tej sprawie.

27.10.2011, 11:55

Link do wypowiedzi

| Cytuj

Krzysztof Janda Student, University
Of Wales

Temat: Ostylowanie rozwijalnej listy - tabulatory

Dzięki za odpowiedzi, bardzo mi się przyda ta wiedza. :)

Zgadzam się, specyfikacja całkowicie pominęła ten tag i manipulacja nim niestety nie ogranicza się do arkusza CSS.

27.10.2011, 12:37

Link do wypowiedzi

| Cytuj