CSS hlavolam s overflow: auto rubrika: Kódování: HTML

5 jachym.tousek
položil/-a 12.6.2012
 
upravil/-a 19.6.2012

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!

odkaz
2 karfcz
odpověděl/-a 19.6.2012

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.

Komentáře

  • jachym.tousek : Což přávě znamená, že se chovají špatně. Viz "it should be inserted BETWEEN the inner border edge and the outer padding edge". Chrome i Firefox scrollbar v uvedeném případě nedají "between", ale "over padding". Díky za ujasnění, že jde opravdu o bug. ;-) — 19.6.2012
  • karfcz : Nikoliv, klíčová je druhá věta. Lze si snadno ověřit, že se takto chovají všechny prohlížeče. Rozdíl je jen ve výpočtu šířky plovoucího boxu s overflow: scroll, což je speciální případ. K vyřešení problému by asi byl potřeba nějaký selector (pseudotřída) na přetečený element, takový bohužel (AFAIK) neexistuje. — 20.6.2012
  • jachym.tousek : Druhá věta znamená, že vnitřní šířka scrollovaného elementu má být případně zúžena o šířku scrollbaru (pokud vnější šířku nelze o šířku scrollbaru zvýšit). To se ale v tomto případě neděje - vnitřní šířka se nezmenší a obsah zaleze pod scrollbar. Navíc nikde nevidím ani ň o tom, že by overflow: scroll; měl scrollbar vykreslovat jinak než overflow: auto;. — 20.6.2012

Pro zobrazení všech 4 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Kódování: HTML

Otázky uživatele jachym.tousek