Problem sa scroll:auto , uzrokuje gubitak širine (prostora)

[bozoou]

Znači primjer je sljedeći: http://jsfiddle.net/8UvVg/790/

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: http://jsfiddle.net/8UvVg/788/

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: http://jsfiddle.net/8UvVg/789/

Kako postići da scroll ne izaziva to?

[creatifcode]

Uracunaj sirinu scrollbara u sirinu tog elementa.

[bozoou]

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…

[maydayy]

Probaj parent display:table, a u redu elementi display: table-cell.

[bozoou]

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;
	}