Button Base Style Not Working

[patrickmann]

Just migrated from v10 to
SmartClient Version: v12.1p_2021-02-04/PowerEdition Deployment (built 2021-02-04)

Base style on buttons is not working. See my example below. The button renders with no background color. When I hover and click the background colors are correct. Not sure what changed. This worked with v10.

Here is my CSS

.loginMain {
    color: white;
    background-color: #543670;
    background-image: linear-gradient(to bottom, #543670, #001122);
}
.loginPanel  {
    padding: 15px;
    border-radius: 15px;
    color: black;
    background-color: white;
}
.loginForm {
    font-size: 30px;
}
.loginButton {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #EC7211;
}
.loginButtonOver {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #FD8322;
}
.loginButtonDown {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #DB6100;
}

Here is my SmartClient Code

isc.VLayout.create({
    width: '100%',
    height: '100%',
    styleName: 'loginMain',
    membersMargin: 20,
    members: [
        isc.HLayout.create({
            width: '100%',
            height: '100%'
        }),
        isc.HLayout.create({
            width: '100%',
            height: '100%',
            members: [
                isc.HLayout.create({
                    width: '100%',
                    height: '100%'
                }),
                isc.VLayout.create({
                    align: 'center',
                    defaultLayoutAlign: 'center',
                    members: [
                        isc.Label.create({ contents: "<p><img width=300 src='/images/brand/default/PLATFORM.png'></div>" }),
                        isc.VLayout.create({
                            width: 350,
                            height: 300,
                            align: 'center',
                            defaultLayoutAlign: 'center',
                            styleName: 'loginPanel',
                            members: [
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '50'
                                }),
                                isc.DynamicForm.create({
                                    titleOrientation: 'top',
                                    width: 200,
                                    cellPadding: 5,
                                    numCols: 1,
                                    fields: [
                                        {
                                            name: "username",
                                            title: "Username",
                                            type: "text",
                                            required: true,
                                            hint: "Username or Email",
                                            showHintInField: true,
                                        },
                                        {
                                            name: "password",
                                            title: "Password",
                                            required: true,
                                            type: "password",
                                        },
                                        {
                                            name: "link",
                                            title: " ",
                                            showTitle: false,
                                            type: "link",
                                            target: "javascript",
                                            click: "isc.say('Hello world!')",
                                            linkTitle: "Forgot my password"
                                        },
                                    ]
                                }),
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '30'
                                }),
                                isc.Button.create({
                                    baseStyle: 'loginButton',
                                    title: 'Sign In',
                                    width: 200,
                                    height: 50,
                                    click: function() {  }
                                }),
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '100%'
                                }),
                            ]
                        }),

                    ]
                }),
                isc.HLayout.create({
                    width: '100%',
                    height: '100%'
                }),
            ]
        }),
        isc.HLayout.create({
            width: '100%',
            height: '100%'
        })
    ],
})

[patrickmann]

Update: When adding a background-image to the base button style I got the button to show but it did not have the proper border-radius applied. So it appears both the background-color and border settings are being ignored on the baseStyle.

background-image: linear-gradient(to bottom, #EC7211, #FD8322);

[Isomorphic]

While regressions do occur, nothing so basic as button background color is going to be broken.

Buttons have optional showFocused styling (see button.baseStyle docs) and as part of your migration, you have switched to a skin where showFocused is true. So on click your button switches to loginButtonFocused and that style doesn't exist. Aside from the docs, also easy to see by just looking at the DOM.

[patrickmann]

I've used all of the options including focused. Did not solve the problem. Please specify what will make this work.


.loginButton,
.loginButtonSelected,
.loginButtonFocused,
.loginButtonSelectedSelectedOver,
.loginButtonSelectedSelectedDown,
.loginButtonSelectedSelecteDisabled,
.loginButtonDisabled {
padding: 15px;
border-radius: 15px;
color: white;
font-size: 14px;
background-color: #EC7211;
}

In addition there is nothing mentioning the focused style in your docs.

[patrickmann]

Here is the DOM being generated for the button

<td class="loginButton" style="border:none;border-radius:inherit;padding-top:0px;padding-bottom:0px;background-color:transparent;text-align:center;vertical-align:middle;white-space:nowrap"><div id="isc_7T" unselectable="on" style="display:inline-block;box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;text-overflow:ellipsis">Sign In</div></td>

As you can see my class is being overridden by the style background-color:transparent and border-radius:inherit

[patrickmann]

Update: I've tried this with Enterprise and Tahoe Skins. On Enterprise the button is transparent (my initial complaint). On Tahoe the button shows up blue (the default tahoe button color). Both are incorrect.

[patrickmann]

Here is a video demonstrating the problem. You have the code and the DOM. Not sure what other info I can provide. Please let me know what I can do to resolve this.

[patrickmann]

Since the Enterprise DOM background color is transparent and border is inherit, I can work around the problem by wrapping the button in another pane with same style.

isc.HLayout.create({
styleName: 'loginButton',
width: 200,
height: 50,
members:[
    isc.Button.create({
        baseStyle: 'loginButton',
        title: 'Sign In',
        width: 200,
        height: 50,
        click: function() {  }
    }) 
]
})

I can define a StyledButton class that will apply this work around, but this will only work for enterprise skins. Tahoe shows a blue button that cannot be overridden. I did see the focused issue with Tahoe buttons, but that was easily corrected by setting showFocusedAsOver to true.

[Isomorphic]

Suffixes included Focused are documented in the getStateSuffix() doc (linked directly from getBaseStyle docs).

We are not reproducing the claimed issue with the exact build you're using - complete JSP-based test case below.

In terms of what you're doing wrong:

1. focused styling is dynamic with focus, so if you go look in your browser dev tools, you are potentially removing focus by clicking on the browser tools window - you will only see the dynamic style transitions if you get the dev tools and actual button showing side by side

2. you've added some strange, non-existent states, but not the ones that are actually used. See the docs and the example below

Keep in mind also, if you don't want special styling for the focused state, all you need to do is set showFocused:false.

<%@ taglib uri="http://www.smartclient.com/taglib" prefix="isomorphic" %>
<!DOCTYPE HTML>
<html>
<head>
    <isomorphic:loadISC skin="Tahoe"/>
<style>
.loginMain {
    color: white;
    background-color: #543670;
    background-image: linear-gradient(to bottom, #543670, #001122);
}
.loginPanel  {
    padding: 15px;
    border-radius: 15px;
    color: black;
    background-color: white;
}
.loginForm {
    font-size: 30px;
}
.loginButton {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #EC7211;
}
.loginButtonOver {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #FD8322;
}
.loginButtonDown {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #DB6100;
}

.loginButton,
.loginButtonSelected,
.loginButtonFocused,
.loginButtonFocusedOver,
.loginButtonFocusedDown,
.loginButtonSelectedFocusedOver,
.loginButtonSelectedFocusedDown,
.loginButtonDisabled {
    padding: 15px;
    border-radius: 15px;
    color: white;
    font-size: 14px;
    background-color: #EC7211;
}

</style>
</head>
<body>
<script>
isc.VLayout.create({
    width: '100%',
    height: '100%',
    styleName: 'loginMain',
    membersMargin: 20,
    members: [
        isc.HLayout.create({
            width: '100%',
            height: '100%'
        }),
        isc.HLayout.create({
            width: '100%',
            height: '100%',
            members: [
                isc.HLayout.create({
                    width: '100%',
                    height: '100%'
                }),
                isc.VLayout.create({
                    align: 'center',
                    defaultLayoutAlign: 'center',
                    members: [
                        isc.Label.create({ contents: "<p><img width=300 src='/images/brand/default/PLATFORM.png'></div>" }),
                        isc.VLayout.create({
                            width: 350,
                            height: 300,
                            align: 'center',
                            defaultLayoutAlign: 'center',
                            styleName: 'loginPanel',
                            members: [
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '50'
                                }),
                                isc.DynamicForm.create({
                                    titleOrientation: 'top',
                                    width: 200,
                                    cellPadding: 5,
                                    numCols: 1,
                                    fields: [
                                        {
                                            name: "username",
                                            title: "Username",
                                            type: "text",
                                            required: true,
                                            hint: "Username or Email",
                                            showHintInField: true
                                        },
                                        {
                                            name: "password",
                                            title: "Password",
                                            required: true,
                                            type: "password"
                                        },
                                        {
                                            name: "link",
                                            title: " ",
                                            showTitle: false,
                                            type: "link",
                                            target: "javascript",
                                            click: "isc.say('Hello world!')",
                                            linkTitle: "Forgot my password"
                                        }
                                    ]
                                }),
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '30'
                                }),
                                isc.Button.create({
                                    baseStyle: 'loginButton',
                                    title: 'Sign In',
                                    width: 200,
                                    height: 50,
                                    click: function() {  }
                                }),
                                isc.HLayout.create({
                                    width: '100%',
                                    height: '100%'
                                })
                            ]
                        })

                    ]
                }),
                isc.HLayout.create({
                    width: '100%',
                    height: '100%'
                })
            ]
        }),
        isc.HLayout.create({
            width: '100%',
            height: '100%'
        })
    ]
})
</script>
</body>
</html>

[patrickmann]

Your example works properly. Something is off in my build then. Investigating....