Button doesnt honor styleName

[sjoshid]

What Im trying to do can be replicated in Smartclient example pages.

All I have is a button and styleName. Like below

<style>
.saveButtonStyle {
    margin-right: 5px;
    width: 60px;
    height: 50px;
}
</style>

isc.IButton.create({
    ID:"ElementSaveBtn", autoDraw: true, title: 'Save',
    styleName: "saveButtonStyle",
    click: function () {
        alert("Clicked");
})

It is so easy that I dont think it is a bug.
Can someone help me understand why the style isnt applied?
Im using Smartclient v10.0.

[Isomorphic]

Did you try to put that CSS definition right next to your JavaScript code? It needs to be in a .css file or <style> block, not a <script> block or .js file.

[sjoshid]

Yes. It is in a <style> block. Updated OP.

[Isomorphic]

Oh - your margin will apply, but the width and height settings will not. Those are specified and controlled via JavaScript, since CSS cannot handle the advanced auto-sizing layout cases that SmartClient is capable of. See this doc for more details.

[sjoshid]

That's good to know. But even margin isnt applied.
New code:

<style>
.saveButtonStyle {
    margin: 5px;
}
</style>

isc.IButton.create({
    ID:"ElementSaveBtn", autoDraw: true, title: 'Save',
    styleName: "saveButtonStyle",
    width: 60, height: 50,
    click: function () {
        alert("clicked")
    }
})

[Isomorphic]

The margin would be *around* the button, so you would not actually see anything until you put the button next to something else.

[sjoshid]

Hmm. Not sure that is correct. But I tried this. Didnt work.

<style>
.saveButtonStyle {
    margin: 5px;
}
</style>

isc.VLayout.create(
    {
        members: [
            isc.Button.create({
            ID:"ElementSaveBtn1", autoDraw: true, title: 'Save 1',
            width: 120,
            height: 100,
            styleName: "saveButtonStyle",
            click: function () {
                alert("Clicked 1");
            }
            }),
            isc.Button.create({
            ID:"ElementSaveBtn2", autoDraw: true, title: 'Save 2',
            width: 120,
            height: 100,
            styleName: "saveButtonStyle",
            click: function () {
                alert("Clicked 2");
            }
            })
        ]
    }
)

[Isomorphic]

The documentation we previously referred you to explains that CSS margins are unpredictable and shouldn’t be used unless absolutely necessary. In this case, membersMargin is much more suitable.

[sjoshid]

I dont mean to be a pain in the back....but I have tried everything in my power to do what I want to do.
I have to do this for work and I have spent nearly 6 hours just to a get a $$#*** gap.

isc.VLayout.create(
    {
        border: 2,
        members: [
            isc.HTMLFlow.create({
                ID: "ElementDetailTitle",
                styleName: "layoutSection",
                contents: "<h2 style='background-color: #00AA00' style='margin-top: 0px'>"
                    + "Element Details"
                    + "</h2>"
            }),
            isc.Button.create({
                ID: "ElementSaveBtn", autoDraw: true, title: 'Save 1',
                width: 60,
                layoutAlign: "right",
                styleName: "saveButtonStyle",
                click: function () {
                    alert("Clicked 1");
                }
            }),
            isc.DynamicForm.create({
                ID: "RouterDF", width: "90%",
                numCols: 2, autoDraw: true, colWidths: ["40%", "60%"],
                fields: [
                    {name: "name1", width: "*"},
                    {name: "name2", width: "*"}
                ]
            })
        ]
    }
)

If you run the code....you'll see the "Save" button is entirely hugging the border of VLayout. I have tried every freaking CSS style: border, margin, margin-right, margin-left, padding, so on so forth.
IT JUST DOESNT WORK.

How on this earth can I get some gap between the right edge of "Save" and VLayout border?

[Isomorphic]

Take a look at the docs for button - styling (like font, border, padding, etc) is controlled by button.baseStyle. And this is a stateful style, meaning, you define a whole series of styles to describe the button's appearance in various states: hover, pressed, etc. So that's what you would do if you wanted to change the appearance of the button.

As we previously covered, if you want to change sizing and placement - that's not done via CSS, because CSS cannot do what SmartClient can do (for just one of dozens of examples, see the Adaptive Width feature).

So, if you want some space around everything in the Layout, which is generally a desirable look, then either padding *on the layout* or layout.layoutMargin would work.

If you instead want the header to be flush to the edges but the rest indented, then just create a sub-layout and put padding or layoutMargin on the sub-layout. Simple.

We would definitely allow you to configure your layout via CSS if CSS layout could actually do what our framework can do. But it can't. So we don't. So you will need to use the docs and samples, and as we explain, use CSS for styling, not layout.

[sjoshid]

As we previously covered, if you want to change sizing and placement - that's not done via CSS

The other admin said margin would work.
But i'll wrap my button in a vlayout.
I was loosing my mind.

Thanks.

[Isomorphic]

Same admin :) margin works in selected cases, but always has underlying CSS issues which you don’t even want to know about, so we recommend staying away from it.

[sjoshid]

:(. I was not in my right mind yesterday. Thanks again.