IButton and Button, different heights in 13.1

[mathias]

Hi, after upgrading to 13.1 we noticed that some buttons had increased heights after we upgraded our skin to 13.1 Like this:


Now, i have no idea if i'm doing something wrong now, or before. All i know is that we're using iButton and it's larger than in 13.0.

I notice that the "isc.Button.addproperties" height parameter affects ibutton to a larger extent than the regular button class, not sure if it was like this before.
I'm pretty sure that we haven't changed any button-related stuff in load_skin compared to 13.0.

Any idea what could cause this? The only way i've found to get it back to the way it was is to manually call .setHeight on all IButtons, but i'd rather not do that if i can avoid it.

EDIT: in 13.1, the Button in the screenshot above has 10px added to the height of the button height in the load_skin, whereas iButton has 20px added to it. Not sure where these values come from? Padding for the .button style in the css is 6, so it's not that.

code to create the buttons:

VLayout body = new VLayout();
Button test = new Button("Button");
 IButton test2 = new IButton("IButton");//test.setAutoFit(true);
 body.addMember(test);
 body.addMember(test2);
  addMember(body);

load_skin:

isc.Button.addProperties({
        height:22,
        width:120,
        baseStyle:"button",
        showFocusedAsOver:false,
        showFocusOutline:false
    });

    // define IButton so examples that support the new SmartClient skin image-based
    // button will fall back on the CSS-based Button with this skin
    isc.ClassFactory.defineClass("IButton", "Button").addProperties({
        baseStyle:"button",
        showFocusedAsOver:false,
        showFocusOutline:false
    });

[Isomorphic]

It sounds like you're using framework-based density-scaling with a call to Canvas.resizeControls()?

Either way, the issue is almost certainly a result of a framework fix for scaling - if your skin is pre 13.1, the block for IButton in your load_skin.js probably doesn't specify a height directly - in this case, framework scaling-logic will increase Button.height (in this case, presumably by 10) and, since IButton doesn't specify a height, that increased value becomes the default for IButton, and then IButton's height is also scaled, increasing it by another 10.

Most likely, the issue will be addressed by setting IButton.height in your load_skin to whatever value is assigned to Button.height there.

[mathias]

Hey thanks for quick response!

I'm not 100% sure i'm following, so what changed in 13.1 compared to 13.0?

I have 13.1 now and there's no "isc.IButton.addProperties" nor was there in 13.0. Did i misunderstand you?

EDIT:

you are totally right that we call resizecontrols btw. I checked and if i remove it, they both get the same height as in load_skin.

So, i'm still wondering why the IButton changes its proportions twice as much as Button - i call Canvas.resizeControls(10), but the IButton gets 20 higher. This is what i don't think was the case prior to 13.1?

[Isomorphic]

Having noticed the load_skin content you showed, you just want to add height:22 to the defineClass() call for IButton.

[Isomorphic]

Regarding you question in the updated post - In 13.0, IButton was scaled once, as a result of Button being scaled. But that was a bug, because not all skins have an IButton that is just a copy of Button -in those skins, IButton would not be scaled. Now, they are scaled individually, so they need individual default heights.

[mathias]

Hey, added it and it works, thanks!

Small question: wouldn't it be a good idea to have that there from the start in iButton? Just curious, it would have avoided changing this behavior?

[Isomorphic]

Yes - as we said, it was a bug that it wasn't there, and it's been fixed in recent versions. But yours is a custom skin from a previous version.