form (with header and textArea) unexpected scrollbar and grow in height

[claudiobosticco]

SmartClient Version: v13.1p_2025-01-16/AllModules Development Only (built 2025-01-16)

Safari and Firefox on macOS

Hello, I've slightly modified the titleChange sample from the showcase to demonstrate an issue I've observed in my application.

When you run the code below, you'll notice the following:

- The profilePane form has a vertical scrollbar (which doesn't appear in Chrome).
- Switching back and forth between the two tabs causes the height of the form to increase incrementally, especially in Safari where this happens faster.

isc.DynamicForm.create({
    ID: "profilePane", height: "*",
    fields: [
        {name: "header", type: "header", defaultValue: "Header", align: "center"},
        {
            name: "yourName", title: "Your Name", type: "textArea", height: "*", width: "*"
        }]
});

isc.DynamicForm.create({
    ID: "preferencesPane",
    fields: [{
        name: "useISCTabs",
        title: "Use SmartClient tabs",
        type: "checkbox",
        defaultValue: true
    }]
});


isc.TabSet.create({
    ID: "tabSet",
    width: 400,
    height: 200,
    tabs: [{
        id: "profile",
        title: "Profile",
        pane: profilePane

    }, {
        id: "preferences",
        title: "Preferences",
        pane: preferencesPane
    }]
});

If I add overflow: "auto" to the profilePane form, this issue doesn't occur. However, the form becomes slightly too tall, resulting in a small amount of scrolling.

If I also set alwaysShowScrollbars: true, switching between the tabs triggers a rapid show/hide of both the vertical and horizontal scrollbars.

[claudiobosticco]

Hello, any news about this issue?

[claudiobosticco]

SmartClient Version: v13.1p_2025-03-01/AllModules Development Only (built 2025-03-01)

Hello, here the behaviour seems a bit better than before, as I don't see the form height increase, but I still see the other issues.

[Isomorphic]

hi Claudio - we're struggling to re-produce issues here - can you confirm you still see them?

[claudiobosticco]

SmartClient Version: v13.1p_2025-04-02/Enterprise Deployment (built 2025-04-02)

Hello, yes, and actually I still see the grow in height, this is Safari on MacOS 14.6.1:
https://youtu.be/CA8Wigq7QBI

the test case is:

isc.DynamicForm.create({
    ID: "profilePane", height: "*",
    fields: [
        {name: "header", type: "header", defaultValue: "Header", align: "center"},
        {
            name: "yourName", title: "Your Name", type: "textArea", height: "*", width: "*"
        }]
});

isc.DynamicForm.create({
    ID: "preferencesPane",
    fields: [{
        name: "useISCTabs",
        title: "Use SmartClient tabs",
        type: "checkbox",
        defaultValue: true
    }]
});


isc.TabSet.create({
    ID: "tabSet",
    width: 400,
    height: 200,
    tabs: [{
        id: "profile",
        title: "Profile",
        pane: profilePane

    }, {
        id: "preferences",
        title: "Preferences",
        pane: preferencesPane
    }]
});

[claudiobosticco]

Hi, have you by any chance ever been able to reproduce the issue? I’m still seeing it with the latest 13.1 build.

[Isomorphic]

This turned out to be a tricky one to resolve but we have made a change that addresses the problem in the latest nightly build (13.1 and above)
Please let us know if you continue to see it

Thanks and regards
Isomorphic Software

[claudiobosticco]

Hi, much better than before (*).
On Firefox and Safari, however, I still see the vertical scrollbar, which I don’t see on Chrome.
Initially, when trying to scroll, the form doesn’t move. After switching between the two tabs back and forth (just once), it then becomes possible to scroll a few pixels.

(*)With further switches between the two tabs, there’s no additional increase in scroll.

[Isomorphic]

Fundamentally the reason for the scrollbar is due to the HeaderItem text rendering taller than expected, so it overflows its allocated space.
This is likely skin dependent.

We do see the behavior in the showcase with the default appearance. We'll address this.

However it would also be helpful to know what settings you have in your application.
Are you using a standard SmartClient skin, and if so, which one?
Also are you modifying the default sizing using the Canvas.resizeFonts() / Canvas.resizeControls() feature?

Note - if you need a quick fix at the application level, you can just apply a larger default height to all HeaderItems - something like this

isc.HeaderItem.addProperties({
    height:25
})

- obviously adjust the height to what looks appropriate in your actual app.

Regards
Isomorphic Software

[claudiobosticco]

Thank you for the explanation.
I’m using a custom skin based on Shiva, with the Roboto font.
I’m using resizeFonts()/resizeControls(), and the user can choose between multiple densities - the most expanded one uses fontIncrease=4 and sizeIncrease=15.

Indeed, increasing the HeaderItem height prevents the glitch from occurring.

[Isomorphic]

hi Claudio - just letting you know, we've tweaked the builtin skins in today's builds to scale HeaderItem automatically, so it won't be clipped.

It's scaled by the fontIncrease rather than the larger sizeIncrease, because this item-type is top-aligned so any additional height appears as extra empty space under the item.

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-04/AllModules Development Only (built 2025-09-04)

Hi, after a quick test in the showcase with Safari, using the testcase from post #5, the visual glitch is still visible.
Also, the workaround of applying a height to HeaderItems no longer seems to work.

[claudiobosticco]

SmartClient Version: v13.1p_2025-09-07/AllModules Development Only (built 2025-09-07)

Hi, I confirm that now it seems to happen only with Safari: after switching between the two tabs, the form becomes slightly scrollable vertically.