Znači primjer je sljedeći: Edit fiddle - JSFiddle - Code Playground
Imamo tipa liniju: ikona, tekst, ikona i gumb (floatan desno)
Želja je da vanjski box prati širinom širinu sadržaja.
E sad, ako proširimo text:
.text {width:200px}
sve se uredno ponaša: Edit fiddle - JSFiddle - Code Playground
No, ako vratimo šrinu texta, a ograničimo vanjski box po visini:
#test {max-height:60px}
…tako da isforsiramo uključenje vertikalnog scrolla, onda se stvar raspadne: Edit fiddle - JSFiddle - Code Playground
Kako postići da scroll ne izaziva to?
Uracunaj sirinu scrollbara u sirinu tog elementa.
Hmm
1.jel postoji CSS selector da opisujem element za stanje kad je aktivan scroll? (ili ostaje samo JS?)
2. trenutno i detektiram to sa JS-om, ali zapravo nisam siguran što mi preostaje i s JSom da radim? Kome da dodam širinu, kad nijedna širina nije eksplicitno zadana? Mogao bi samo u nebesa tjerati min-width glavnog boxa i nadati se da se neće pojaviti elementi koji premašuju unaprijed zadani min-width. A to mi se baš ne dopada…
Probaj parent display:table, a u redu elementi display: table-cell.
Probao sam i sa table elementima izvorno. No onda se dešavalo da tablica (tr) ostane ockej u jednoj liniji, ali djelovi pojedinog td-a se raspadnu u više linija.
Al iskopao sam da nema baš elegantnog rješenja sa css-om http://stackoverflow.com/questions/8409613/how-can-i-include-the-width-of-overflow-auto-scrollbars-in-a-dynamically-siz
Tako da sam se okrenuo Javascriptu i sljedeća funkcija mi trenutno dobro radi:
HTMLElement.prototype.normalizeScroll=function()
{
if(!hasScroll(this))return;
//kod prvog poziva, pamti defaultni zadani minWidth
if(!this.defaultMinWidth)this.defaultMinWidth=$(this).css('minWidth');
this.style.minWidth=this.defaultMinWidth;
this.style.overflow='visible';
this.style.minWidth=(this.getWidth('ip')+10)+'px';
this.style.overflow='auto';
return;
}