Clipped formTitle extra CSS class

[sedavis]

We have some areas where we take a staticTextItem and apply titleStyle: textCaption so that the title uses a custom CSS class we have created. Normally this works well, but if theres a spot where we need to also apply clipTitle: true, then an extra div is added to the HTML with the default class of formTitle which negates titleStyle: textCaption. It also seems to randomly apply the Disabled state to the extra div class even though it is not disabled.

Is there a way to remove this redundant CSS class on clipped titles? I don't see any properties like clipTitleStyle.

See the screenshot below, the pink boxes highlighting the two classes. When clipTitle: false is set, there is only the textCaption class once. When clipTitle: true then the extra div with the default formTitle class is added.

[Isomorphic]

This DIV is there to actually do the clipping, so it cannot be removed. As long your CSS class doesn't break the rules for CSS usage in SmartClient (e.g. don't attempt to do layout via CSS), the intervening DIV should not be a problem. Show the CSS class here if you think it's valid but isn't working.

Similarly, you say that Disabled styles are "randomly" introduced. That's not an issue that's ever been reported before, so please show how that can be reproduced.

[sedavis]

There being an extra DIV is not the issue, it's that the extra DIV has the default CSS class added to it instead of respecting the titleStyle that was applied to the instance. I want it to look like our class textCaption (which just changes the font size and color), but when there's an added child DIV with a class of formTitle instead of textCaption, formTitle then overwrites any of the changes from the parent DIV css. If I want it to look like textCaption I'd have to update my CSS to look like:

.textCaption, .textCaption .formTitle

which is kind of sloppy and excessive when considering all the suffixed classes also required.

[Isomorphic]

If you set your style as the formItem.titleStyle, then you should see that style applied to the additional DIV needed for clipping.

So, as previously mentioned, it looks like you are instead using CSS selectors in a way that depends on the details of the DOM structure, which is not supported for precisely this reason: features like clipping, auto-sizing and so forth mean that the framework may have to generate a different DOM structure in different circumstances. This is also necessary to work around browser bugs, and performance issues in some browsers, and other reasons.

If you think you are using the settings correctly (per docs), then simply show us the code (JS and CSS) that you are using, and we can check it out.

[sedavis]

What I'm gathering is this must be something with our implementation. In our load_skins.js file we have formItem.titleStyle set to formTitle, but then there are some specific instances where we override titleStyle to be textCaption, and then there are even fewer cases where titleStyle is textCaption and wrapTitle is true, and when that happens the parent DIV follows the instance specific titleStyle but the nested DIV follows what's in load_skins.js. And I'm trying to AVOID using CSS selectors, as I know that Smartclient does not play well with complex CSS.

But I will dive deeper on our end and see if it's something with how we have it implemented.

[Isomorphic]

Let us know if you can show how to reproduce that - we don't see any way it could happen, no without invalid selectors.

[sedavis]

We have narrowed down when this is being caused.

There must be two or more formItems with clipTitle: true, and there must be a mix of titleOrientation: top and titleOrientation: left. The first item with titleOrientation: top will define the titleStyle that gets applied to all titleOrientation: left formItems that follow it that also has clipTitle: true

If we see two items as (briefly) defined as below:
type: "text",
name: "Item1",
clipTitle: true,
titleOrientation: "top",
titleStyle: "default"

type: "text",
name: "Item2",
clipTitle: true,
titleOrientation: "left",
titleStyle: "custom"

Then
Item1 has <div class="default"><div></div></div>
Item2 has <td class="custom"><div class="default></div></td> and there for will be styled to look like default since that is the inner most DIV closest to the text.


I have also been able to reproduce this on the Smartclient Showcase site as screenshot below. If there's two TextItems, one with top title then one with a left title and both are clipTitle true, then if I apply a titleStyle to the 2nd textItem, the inner div will still pickup whatever the titleStyle of the first item is, even if just the default class. If I remove the first item or make it a left title, then the problem goes away.

One of our developers who knows more than I said the ISC_Forms.js file has something wrong with the titleClipDivTemplate (something about there being 12 indices but when checking the object there's 13) and thought perhaps something with the "includeClassName" value.

If you need further debugging info from me, let me know and I can see if he can provide better details. But hopefully you'll be able to recreate it with the above information and take it from there.

[Isomorphic]

This is great - thanks for the test case.

However, one last step (which actually should have been the first step) - please let us know what product and what exact version (including the build date) you're using.

If you were not using the latest patched build for your version (see smartclient.com/builds), please download and test against that.

Note: we realize you mentioned that you reproduced this in the Showcase. However, this could be the local Showcase in an out-of-date SDK.

[sedavis]

We're using Pro v12.1p_2023-09-22 but was able to reproduce in the Showcase at https://smartclient.com/smartclient/showcase/, which shows 13.1p built 2024-11-20

[sedavis]

If you go to https://smartclient.com/smartclient/.../?id=helloForm and paste this in then inspect the HTML you'll see the class discrepancy. It doesn't visaully look difference in this case because "custom" is not a real CSS class, but you can still see the HTML reflects what I describe. Then deleting the first textItem and reinspecting you'll see the HTML reflects the CSS classes I'd expect.

isc.DynamicForm.create({
    autoFocus: true,
    numCols: 3,
    items:[
        {
            type: "text",
            name: "you",
            title: "Enter your name",
            titleOrientation: "top",
            clipTitle: true,
            selectOnFocus: true,
            wrapTitle: false,
            defaultValue: "my friend"
        },
        {
            type: "text",
            name: "you",
            title: "Enter your name",
            titleStyle: "custom",
            clipTitle: true,
            selectOnFocus: true,
            startRow: true,
            wrapTitle: false,
            defaultValue: "my friend"
        },
        {
            type: "button",
            title: "Hello",
            autoFit: true,
            startRow: true,
            icon: "[SAMPLE]icons/16/message.png",
            click: "isc.say('Hello ' + form.getValue('you') + '!')"
        }
    ]
})

[sedavis]

Wanted to check in and see if there was any more info needed from me and see if there was an idea of an ETA for this fix. Thanks.

[Isomorphic]

hi sedavis - we're taking a look and will update here when we have more information.

[Isomorphic]

A couple of points here - when we try your test code:

1) in the latest 12.1, at this link, we see titleStyle working for both horizontal and vertical titles. So, if you want to stay on 12.1, you probably just need to update to its latest build from smartclient.com/builds - and you should do that anyway!

2) in 13.x and 14.x, which we recommend you move to if you can, there is a separate property "verticalTitleStyle" for controlling the style of top-oriented titles - this allows for the vertical spacing between an item and its title to be expanded by framework Density functionality.

[sedavis]

Looking in the latest 12.1 at that link, and pasting the code from my previous post produces the same issue. Whatever the titleStyle of the first top oriented title gets applied to the inner div of the left oriented title when the left oriented title has a custom titleStyle applied. I can screenshot what I'm seeing, but it's identical to what I've already screenshot.

Changing to 13.1 and adding "verticalTitleStyle" instead of plan "titleStyle" to a formItem with a top oriented title still produces the same issue as above.

13.1 I used this:

isc.DynamicForm.create({
    autoFocus: true,
    numCols: 3,
    items:[
        {
            type: "text",
            name: "first",
            title: "Enter your name",
            titleOrientation: "top",
            verticalTitleStyle: "customTop",
            clipTitle: true,
            selectOnFocus: true,
            wrapTitle: false,
            defaultValue: "my friend"
        },
        {
            type: "text",
            name: "second",
            title: "Enter your name",
            titleStyle: "customLeft",
            clipTitle: true,
            selectOnFocus: true,
            startRow: true,
            wrapTitle: false,
            defaultValue: "my friend"
        },
        {
            type: "button",
            title: "Hello",
            autoFit: true,
            startRow: true,
            icon: "[SAMPLE]icons/16/message.png",
            click: "isc.say('Hello ' + form.getValue('you') + '!')"
        }
    ]
})

And it created this CSS, note the 2nd text field should only show "customLeft" but the inner div shows "customTop" which was only defined on the first text item.

[Isomorphic]

Thanks for the follow-up - you're quite right - title-HTML is sometimes cached for efficiency and, in this case, the title-style from the first item was indeed being cached and not overridden for subsequent items.

Please retry with tomorrow's builds, dated December 11 and later