Title overlapping with SectionStackSection control

[akhader]

Version:SNAPSHOT_v8.3d_2012-07-18/LGPL Development Only (built 2012-07-18)

final SectionStack sectionStack = new SectionStack();  
	        sectionStack.setWidth(300);  
	        sectionStack.setHeight(350);
	        
	        Img icon = new Img("/TextEditIcon1.jpg");
	        icon.setSize("30px", "30px");
	  
	        SectionStackSection section1 = new SectionStackSection("Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest");  
	        section1.setID("blueSection");  
	        section1.setExpanded(true);  
	        section1.setControls(icon);
	        sectionStack.addSection(section1);  
	        
	        
	        SectionStackSection section2 = new SectionStackSection("Section 2");  
	        section2.setExpanded(true);  
	        section2.setCanCollapse(false);  
	        sectionStack.addSection(section2);  
	        
	        sectionStack.draw();

The title of the SectionStackSection overlapping with the controls in the SectionStackSection.

Browsers: IE9, FF13

Please see the attached screen-shot.

[Isomorphic]

Do not use strings like "30px". Pass actual numbers for pixels, and use the String arguments just for percents (like "55%").

[akhader]

I changed the setSize to:

icon.setSize("100%", "100%");

The problem still appear.

Even I replaced setSize method with:

icon.setWidth(30);
icon.setHeight(30);

and the problem still appear, please see the attached screen-shot.

[Isomorphic]

Ah, right, there is no automatic clipping of titles to avoid overlapping controls.

[akhader]

Isomorphic, are you going to fix this in the future nightly builds?

I have the same issue, but unlike the original picture attached, my stack has several controls and they have a lot of transparency so the interleaving of the text and the header controls makes the area almost unreadable. (See attached screen shot - the "XXXXX" was part of my string for localization testing with longer strings).

[akhader]

Any solution Isomorphic?

I just tried and this is still happening in 4.0. Is it possible to get this addressed some how either by making clipping the default or adding settings to the header to control this like wrap/clipping/ellipses?

[Isomorphic]

This was fixed in 4.0. Can you indicate how this can be reproduced, and with what skin, DOCTYPE setting and browser?

Sorry, I am not able to repro this in a simple example. We have extensive custom styling so the problem at this point must be something we are doing in our override of the styling. I'll dig into it more on my end. Sorry for bothering you with this.