Size of redrawn buttons incorrect

[hin3x]

Hi,

we have encountered a styling issue that occurs only on Firefox (confirmed with 17 and 18).
When redrawing buttons with a border after the initial render, the buttons are rendered bigger than they were originally.
This is not the case with IE9.

Please find below a reprocase, which renders 4 buttons and a textfield (initially all of them equally sized 110x25 pixels).
When clicking on the textfield, the lower 2 buttons are removed, and new ones are added in the same place, with the same styling. However, they are bigger than the unchanged ones.
(See attached file: Reprocase.html)(See attached file: Reprocase.css)(See attached file: Reprocase.gwt.xml)(See attached file: StatefulButtonGroup.java)(See attached file: Reprocase.java)

Thanks for investigating this.


Note: This is with smartgwt 3.1 nightly from yesterday (thursday).

[hin3x]

Hello,

Are you able to reproduce this one with our sample code?

thanks

[Isomorphic]

We're not currently seeing it, no.

Which skin are you loading?
And what OS are you running Firefox on where the problem is manifesting?

Thanks
Isomorphic Software

[hin3x]

Hello,

An update, we have created a repro case contained in the attached zip.
This is tested on FF 19&18 win/linux os and both yield the problem.

When you start the repro project you will see 4 buttons on top, look closely how they are drawn. Now click in the 1st text field and wait a bit, you will see that the 2nd row of buttons is redrawn and that the size is not the same anymore.

thanks for looking into this

[hin3x]

I am unable to upload the zip, it is always giving me an 'invalid file' error after the upload. I have recreated it a few times but it keeps popping that error?

[Isomorphic]

We received the .zip file you sent us via email for this issue and are able to see it.
The problem is to do with the way you're setting the styles.

Your icon buttons have a baseStyle specified (iconButton). This determines what css stylename to apply to the widget by applying stateful suffixes (Over, Selected etc) if necessary.
You are also specifying an explicit styleName via iconButton.setStyleName(...).
The styleName being applied here is a partial style (a border only) - and clearly the intention is that it will be displayed on the button in addition to the className picked up from the baseStyle + suffix.

This is not a supported usage - the baseStyle essentially replaces the styleName for StatefulCanvas instances like Buttons, which show stateful styling.
The fact that it is mostly working is due to an implementation quirk.

You should be able to resolve this issue by instead encapsulating your desired style (all aspects, font, backgroundColor, border etc) into the style that will be picked up from setBaseStyle(...).

Regards
Isomorphic Software

[hin3x]

As request, we have adapted the styling to use baseStyle.
So, we changed the method StatefulButtonGroup.styleButtons() from the supplied reprocase with this:

	public void styleButtons(){
		// Style buttons according position
		for(int i = 0; i < container.getMembers().length; i++){
			Canvas c = container.getMember(i);
			if(c instanceof IconButton){
				
				if(container.getMembers().length == 1){
					((IconButton) c).setBaseStyle("singleStatefulButton");
				} else {
					if (i == 0){
						((IconButton) c).setBaseStyle("leftStatefulButton");
					} else if (i == container.getMembers().length - 1){
						((IconButton) c).setBaseStyle("rightStatefulButton");
					} else {
						((IconButton) c).setBaseStyle("middleHorStatefulButton");
					}
				}
			}
		}
	}

Along with this new attached stylesheet.

This indeed resolves the problem in firefox, but now it's not working correctly in IE9.
IE9 does not show the red button borders, and when clicking within the first field, the buttons display a blue border (from the background).

Can you look into this again please?

[hin3x]

Hi,

Do you have an update on this one please.

thanks

[Isomorphic]

This looks like it might be an oddity in the .css file.
If you separate class names with commas
so

.statefulButtons .leftStatefulButtonSelected,
...

becomes

.statefulButtons, .leftStatefulButtonSelected,
...

You should get consistent behavior cross browser. Let us know if there's more going on here

Thanks
Isomorphic Software