12.1: ToolbarItem height too small

[claudiobosticco]

SmartClient Version: SNAPSHOT_v12.1d_2019-01-09/AllModules Development Only (built 2019-01-09)

Chrome on OSX

Hello, I've just noticed a little problem in the latest 12.1, please try this test case:

isc.DynamicForm.create({
    ID: "timeForm",
    wrapItemTitles: false,
    fields: [
        {name: "textTime", title: "Time #1", type: "time"},
        {
            name: "pickTime", title: "Time #2", type: "time",
            minuteIncrement: 15,
            useTextField: false
        },
        {
            name: "myToolbar", type: "toolbar", buttons: [
                {
                    name: "showButton",
                    width: 125,
                    title: "Show Time Values",
                    getTime: function (itemName) {
                        var item = timeForm.getItem(itemName);
                        var inputTime = item.getValue();
                        return isc.Time.toTime(inputTime);
                    },
                    click: function (form, item) {
                        isc.say("Time #1: " + this.getTime("textTime") + "<br>" +
                            "Time #2: " + this.getTime("pickTime"));
                    }
                }
            ]
        }
    ]
});

You'll see that the button height is too small.

[Isomorphic]

We're not seeing an obvious problem from running your code.
This may be one that depends on which skin you're loading and other similar settings. Can you share a screenshot of what you're seeing so we can be clear on exactly what the problem is?

Thanks

[claudiobosticco]

Hello, you could run that code in the current 12.1 showCase: https://www-demos.smartclient.com/sm...12.1/showcase/
Any skin seems to show the problem:

[Isomorphic]

We've got to the bottom of this and made a change to address this issue, which will be present in the next nightly build.
To flesh this out a bit - a longstanding issue has been resolved in the 12.1 branch whereby if you have a button marked as autoFit:"true" with autoFitDirection set to "both", the button should be sized vertically and horizontally to fit its title, even if the button is added to a Layout or Toolbar. Historically we'd (incorrectly) expand such a button vertically to fill the inner height of the Toolbar the button was contained in.

There was a setting in the load_skin.js file for a number of our skins, including the default (Tahoe) which explicitly set up Toolbar items' buttons in this way.
We've decided this is an inappropriate default - the previous behavior (expanding the ToolbarItem buttons vertically to fit the height of the item) is expected, so we've updated our skin files to set the autoFitDirection to "horizontal" instead of "both" and restore the previous behavior.

If you want to explicitly solve this with the above sample code (without picking up the new version of the skin), you can simply modify your sample code to specify autoFitDirection:isc.Canvas.HORIZONTAL in the button properties.

[claudiobosticco]

Thank you very much for the explanation and the fix, verified in:

SmartClient Version: SNAPSHOT_v12.1d_2019-01-30/AllModules Development Only (built 2019-01-30)