CSS hlavolam s overflow: auto rubrika: Kódování: HTML
6
jachym.tousek
Tvořím takovou trochu složitější komponentu a narazil jsem na podivný CSS problém. Jde o bug Firefoxu a Chromu (Opera a IE8+ jsou v pořádku).
Jde o to, že v jistém speciálním případě se scrollbar při použití overflow: auto;, white-space: nowrap; a pár dalších věcí zobrazí uvnitř divu namísto venku. Hledám nějaký work-around.
Zde ukázka, mrkněte na zdroják.
Nyní proč jsou jednotlivé použité vlastnosti nutné a nemohu je odstranit:
Overflow: auto je pro mne důležitý, protože potřebuji zobrazit scrollbar v případě (a pouze v případě - proto nelze použít scroll), že max-height nestačí pro vykreslení.
White-space: nowrap je také důležitý, protože je nežádoucí, aby se v tabulce cokoli zalamovalo.
Float: left potřebuji proto aby se div neroztahoval kdovíkam (100% rodiče), ale současně aby se roztahoval do šířky dle potřeby. Neznám žádný jiný způsob. Jakékoli pevné šířky sloupců či tabulky naprosto nepřichází v úvahu.
Zatím jediný způsob jak to umím opravit je použití padding-right, což se mi vůbec nelíbí, protože bych jednak musel detekovat použitý prohlížeč a druhak by to začalo blbnout kdyby to Mozilla a/nebo Google ve svých prohlížečích v budoucnu opravili (do bugzilly už jsem vložil report).
Jsem zvědav zda někdo přijde na nějaké řešení. :-) Good luck!
4
karfcz
Myslím, že v případě Firefoxu a Chromu jde naopak o správné chování, viz CSS specifikace:
In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
Pro zobrazení všech 4 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře