[SimonF]

We're currently facing a weird problem with the latest update (in Chrome Version 61.0.3163.79)

With "v11.1p_2017-09-05/Pro Deployment" (included the initial reported chrome bug)

With the latest release "v11.1p_2017-09-11/Pro Deployment"" it looks like this.


We are working with Canvas.resizeControls(4); and Canvas.resizeFonts(2);.
Also there is no box-shadow shown when hovering with the mouse.
It looks like the "resizeControls" is not correctly send to the classes.

If we are copying the same DynamicForm in a single file (to reproduce this issue) it is rendered normal (like the first image).
Swapping one smatclient-release with the other, we have either smaller buttons (screenshot 2), or the chrome-bug (initial post).

I've no idea why this is only happening if the server is sending this. But switching to the old version (with initial bug) results in correctly sized buttons.

Do you have any ideas?

Best regards

[claudiobosticco]

Hello, I still see that visual glitch in Tabs, with 09-09 builds, both 11.1 and 12.0.
Tested with Chrome on Mac OSX and Windows 10 too.

Thanks for the notification. We'll be taking another look at this

I see that this is fixed with latest builds, thank you very much.

[SimonF]

Hey there,

just wanted to give you an update on the matter with the strangly displayed buttons I mentioned in my previous post. Hoping that this can help you to determine the bug.

First of all I realized, that the problem only occurs, when I set a width to a normal ButtonItem in a DynamicForm.

When I remove the width, the height of the button is correct. But obviously the width is not as we want it.


Then, MenuButtons are not displayed with the correct height as well.

But when I add autoFit: true, it adjusts the height. (Here again the width is not as we want it, so it is no real fix for us)


Normal Buttons, as used for ToolStrips, are not affected, as you can see with the right button on the MenuButton example images above.

As I mentioned before, in "v11.1p_2017-09-05/Pro Deployment" this bug is non existent. Every button is displayed with the same height.
We checked with the latest release "v11.1p_2017-09-13/Pro Deployment" and the problem still exists there.

Best regards

[Isomorphic]

Hi Simon,
We're going to need to see a way to reproduce this. We put together some test code based on your description and are not seeing the problem.

For reference, we're testing by hitting the showcase (for example - here): https://www.smartclient.com/smartcli...sizeIncrease=4

And evaluating the following test code

isc.VStack.create({
    membersMargin:10,
    members:[
        isc.DynamicForm.create({
            ID: "contactForm",
            width: 400,
            wrapHintText: false,
            fields: [
                // no explicit width on ButtonItem
                {name:"foo", showTitle:false},
                {name:"button1", startRow:false, editorType:"ButtonItem", title:"xxx"},
                // with explicit width
                {name:"moo", showTitle:false},
                {name:"button2", width:100, startRow:false, editorType:"ButtonItem", title:"xxx"}
            ]
        }),
        // Menu button case:
        isc.HStack.create({
            membersMargin:10,
            members:[
                isc.MenuButton.create({
                    title:"Menu"
                }),
                isc.Button.create({
                    title:"Button"
                }),
                // Auto fit version
                isc.MenuButton.create({
                    title:"Menu 2",
                    autoFit:true
                })
            ]
        })
    ]
});

If you can show us a way to reproduce the issue we'll take a look.

Thanks
Isomorphic Software

[SimonF]

Thank god, we were successful in reproducing this bug!

This bug does appear if you have set the js variable "isomorphicDir". This is reproducable with the latest nightly build (SmartClient_v111p_2017-09-13_Pro).
This results into a bug in Firefox (latest edition)

Chrome (latest edition)

but not in IE.

I'm aware that in the example, you could easily remove the variable "isomorphicDir", but this is needed in our environment to set the right path.
Also this is referenced in a lot of posts in the forum.

Please see this code for complete reproduction.

<!DOCTYPE html><html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var isomorphicDir="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/";
</script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Core.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Foundation.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Containers.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Grids.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Forms.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Drawing.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Charts.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/system/modules/ISC_Calendar.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/skins/Tahoe/load_skin.js"></script>
<script SRC="http://d7zf2jpcbqt9v.cloudfront.net/isomorphic/locales/frameworkMessages_de.properties"></script>
</head>
<body>
<script>
Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.VLayout.create({
    "ID": "alayout",
    "width": "100%",
    "members":
    [isc.ToolStrip.create({
            "ID": "aToolstrip",
            "width": "100%",
            "members":
            [
                isc.Button.create({
                    title: "Button"
                }),
                isc.Button.create({
                    "overflow": "visible",
                    "title": "Button with overflow"
                }),
                isc.MenuButton.create({
                    title: "Menu"
                }),
                // Auto fit version
                isc.MenuButton.create({
                    title: "Menu autoFit",
                    autoFit: true
                })
            ]
        })
    ]
});
</script>
</body>
</html>

Best regards

[SimonF]

In addition, if you add a prompt to a "bugged" component, it is not displayed correclty. This does happen in Chrome. In Firefox it is shown correct.


Also the "bugged" components, does not have the focus-effect (blue shadow) e.g. in Firefox (also in Chrome)


Best regards

[Isomorphic]

The way you've set this up, this would cause cross-domain loading of stylesheets, which would then cause resizeFonts() to fail, which would be expected to have some of these effects.

Are you saying that these issues happen for you locally when you set an isomorphicDir that is a relative path? Because that seems impossible unless different files are actually being loaded.

[SimonF]

I'm aware that this cause an effect on resizeFonts(). You can also ignore this call, and the same problem would appear.

This happens if the files delivered are from another hostname. e.g. the html file is called by "http://localhost/test.html" and the referenced isomorphic files are from "http://yourlocalhostname/isomorphic/...". We are not setting relative paths, only absolutes with the full url.
Hopefully you can see in the screenshot that resizeControls() does not work properly in the example, and the same problem we do have in production if we are referencing a cloudfront distribution where we are hosting the files.
The resizeFont() is not the problem here, we have found a solution by our own, which we don'T have to discuss here.

Best regards

[Isomorphic]

We are reproducing the problems with the border not showing up and resizeControls seemingly not behaving correctly.
We aren't seeing the mismatch in heights between the explicitly sized and auto-sized components but we're looking into the problems that we do see, and we can follow up from there.

We'll let you know when we have more information for you

[Isomorphic]

Just a quick follow up - this is a result of issues arising from the stylesheet being loaded from a different origin and native browser limitations / security restrictions on accessing css style rules from a cross-origin loaded Stylesheet. We're looking at whether we have options to work around this

[Isomorphic]

We've made a change to the 11.1p branch which should resolve this issue with button sizing, borders and shadows and cross-domain stylesheets. This will be present in the next nightly build, dated September 20 or above.
Please try the next nightly build and let us know if you continue to encounter problems in this area.

Regards
Isomorphic Software

[claudiobosticco]

Hi there,
when you hover over a Tab or a ButtonItem in Chrome Version 61.0.3163.79 (Official Build) (64-Bit), those components change their size. This can be observed in the "Custom Component Tab Order" example: https://www.smartclient.com/smartcli...izeIncrease=10

Hello, it seems that using the latest 12.0 build, the problems shows again in Chrome.

Chrome 61.0.3163.100 (64 bit) on OSX
SmartClient Version: SNAPSHOT_v12.0d_2017-10-03/AllModules Development Only (built 2017-10-03)

[Isomorphic]

Yes, there was a one-day regression caused by a separate fix - it's been addressed and the change should hit today's build

[claudiobosticco]

SmartClient Version: SNAPSHOT_v12.0d_2017-10-04/AllModules Development Only (built 2017-10-04)

Yes, I see it's fixed, thanks.

[mazzi]

We've made a change to the 11.1p branch which should resolve this issue with button sizing, borders and shadows and cross-domain stylesheets. This will be present in the next nightly build, dated September 20 or above.
Please try the next nightly build and let us know if you continue to encounter problems in this area.

Regards
Isomorphic Software

Hi,

The fix that you made since the build mentioned above does seem to have fixed it for Chrome and Firefox, but did also introduce button rendering issues on IE11 in both the Enterprise and the Simplicity skins. Buttons no longer show a border around them. This behavior is reproducible using your showcase example:https://www.smartclient.com/smartgwt...ory_appearance

Running this showcase example in IE11 shows no borders around buttons. Whereas in both Chrome and FF they do show borders.

Thanks,
Mike