CSS+JS: Select levaltasa sajat stuffal - aprobb gondok

Internet: PHP, CGI, stb.

Sziasztok.

Nem tudom, tud-e valaki segiteni, de hatha.

Van egy olyan problemam, hogy megprobaltam csinalni egy custom dropdown listet ul-bol meg li-bol (mivel a sima select nagyon kilog az oldalbol). Mukodik is szepen, egy apro gonddal: van egy irdatlan hosszu listam, ami nagyon sok kepernyon at tart (orszaglista, egy helyen jelenik meg, de borzaszto hosszu), es azt szeretnem, hogy ha ilyen van, akkor nyomjon mar oda egy scrollbar-t, es ne legyen olyan nagyon nagy.

Maga a kod itt van, jQuery van mogotte, de amint latszik, eleg keves dolgot hasznalok belole. Gyakorlatilag annyit csinal, hogy megkeresi az osszes stilusozott select elemet az oldalon, es lecsereli a sajat megvalositasra oket.

Elore is koszonom a segitseget.

PS: ha valaki azt is megsugja, hogy hogy lehet elerni, hogy a legordulo li elemek eltakarhassak a legordulo alatt levo input elemet, es ne csak kozrefogjak, akkor ugyancsak halas leszek.

  • 1529 megtekintés

( zoner | 2010. 08. 11., sze – 13:12 )

CSS-ben:

overflow: scroll

Itt megadhatod fixen a magasságát is, de akkor úgy is magas lesz, amikor nincs annyi elem benne. A legjobb megnézni javascript-el, hogy mekkora és ha túl nagy, csökkenteni.

--
http://sandor.czettner.hu

lapozos: Igen, ezen en is elgondolkodtam, csak az bonyibb, nem ertek ennyire hozza

ol.select: izeee... ide mar probaltam, de valamiert az lesz a vege, hogy csak egy kis, item meretu ablakban tudom gorgetni a listat.

... gondolkodik ...

Viszont az otlet jo volt, megoldodott. Az ol.selectOpen lett a korrekt hely. Nagyon koszonom.

Szerk: adodik egy masik kerdes: hogy mondom meg, hogy az igy megnovelt ol/ul elfedhessen mindenfelet (pl. fieldset hatart, textfieldet, meg ilyeneket)? Jelenleg hozzameretezi a fieldsetet, ami nem az, amit szeretnek.
-- 


Ki oda vagyik, hol szall a galamb, elszalasztja a kincset itt alant.

Ize, ez ala pontosan mit rakjak?
Jelenleg az ol.selectOpen tartalma: 


ol.selectOpen {
    height: 300px;
    overflow-y: scroll;
    z-index: 50;
}

ebbol a height nem tunik jo otletnek, a tobbi talan, de tanacstalan vagyok.

Lecci segitsetek, eleg kezdo vagyok meg CSS-ben, es ugy tunik, picit nagy lesz ez a fa...

Szerk:
Kiprobaltam az alabbit: 


ol.selectOpen {
    /*height: 300px;*/
    height: 60px;
    overflow-y: scroll;
}

ol.selectOpen * {
    z-index: 50;
}

Ez mar majdnem az, amit szeretnek, legalabbis kepes overlapolni dolgokat, am a dropdown alatti cuccok tovabbra is lejjebb masznak.

Kezdek arra gondolni, hogy a koncepcio rossz. Az biztosnak latszik, hogy a weboldal menukben megoldott dropdown-ok azert tudnak mukodni, mert ott az ul elem komplette nem latszik (display: none), es csak hoverre, vagy clickre jon elo. Nalam viszont az a helyzet, hogy az ol egy kituntetett eleme (a li.selected) latszik folyamatosan, igy maga az ol is, tehat a bongeszo ugy tervezi meg az oldalt, hogy benne van az ol elem is. Amikor az ol elem a selectOpen class felvetelekor meretet valt, akkor eltolja a tobbi elemet, hogy az uj meretu ol kiferjen, ahelyett, hogy siman eltakarna vele az objektumokat. Ez sajnos fuggetlennek nez ki a z-index erteketol.

Valoszinu, hogy valami olyasmi lesz a megoldas, hogy a ol-li menu csak menu lesz, es a kivalasztott elemet egy kulon elemben, mondjuk egy span-ban mutatom meg.
-- 


Ki oda vagyik, hol szall a galamb, elszalasztja a kincset itt alant.