Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Width of Button switches on hover in firefox

    Hi there,
    It seems when initially loading a page with smartclient-components the width on the buttons are not correct set.
    This only happens when the SC-files (I assume the fonts are the problem) are not already loaded.
    After hitting Ctrl+F5 (reload without cache)

    Version: SmartClient_v111p_2017-07-19_Pro
    Browser: Firefox 54.0.1 (32-Bit)
    Skin: Tahoe
    Density: Medium


    This does not happen in Chrome or Internet Explorer.

    Code:
    Canvas.resizeControls(4);
    Canvas.resizeFonts(2);
    isc.ToolStrip.create({
        "ID": "theToolstrip",
        "width": "100%",
        "members":
        [
            isc.Button.create({
                "ID": "theShortButton",
                "overflow": "visible",
                "title": "short text",
                "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
            }),
            isc.Button.create({
                "ID": "theLongButton",
                "overflow": "visible",
                "title": "longer Text Example",
                "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
            })
        ]
    })
    Best regards
    Last edited by SimonF; 20 Jul 2017, 00:02.

    #2
    You need to set the iconSize to match the size of your icon, otherwise sizes will not be known until the image is loaded.

    Comment


      #3
      But this does only happen with the Tahoe-Skin?
      With Enterprise-Skin and the same example this width-changing effect does not occur.


      To keep the possibility to switch between the skins this should be handled the same way through all the skins imho.

      Edit: Yes setting the iconSize does indeed "fix" this, but looking at the documentation the default iconSize should already be set to 16.
      http://www.smartclient.com/smartclie...anvas.iconSize
      Last edited by SimonF; 21 Jul 2017, 04:23.

      Comment


        #4
        Hi there,
        Is there any explanation why this is workign with the Enterprise skin, but not with the Tahoe skin?
        Reading your answer the resizing of the buttons should also happen in the Enterprise skin, but as shown in the gif , it doesn't.

        Comment


          #5
          The problem happens because the icon media you supplied does not match the skin default in the Tahoe case, but does in the Enterprise case.

          Comment


            #6
            Hi there,
            I've retested the issue with the latest downloadable build (SmartClient_v111p_2017-07-30_Pro)

            Neither iconSize nor iconWidth does change the shown behaviour of the first post.
            Code:
            Canvas.resizeControls(4);
            Canvas.resizeFonts(2);
            isc.ToolStrip.create({
                "ID": "theToolstrip",
                "width": "100%",
                "members":
                [
                    isc.Button.create({
                        "ID": "theShortButton",
                        "overflow": "visible",
                        "title": "short text",
                        "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
                    }),
                    isc.Button.create({
                        "ID": "theLongButton",
                        "overflow": "visible",
                        "title": "longer Text Example",
                        "iconSize": 16,
                        "iconWidth": 16,
                        "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
                    })
                ]
            })
            Any solutions to this?

            Comment


              #7
              This issue persists with the latest downloadable (Version SmartClient_v111p_2017-08-02_Pro).
              Is there any known working workaround? Is this issue recognized for further inspection?

              Best regards

              Comment


                #8
                Hi again,
                In the latest nighlty of SmartClient_v111p_2017-08-08_Pro the issue does persists.
                I would also like to add that this issue is also affecting the docs (e.g. https://www.smartclient.com/smartcli...zeIncrease=4):


                Is there any workaround for this by now?

                Best regards

                Comment


                  #9
                  We are still looking into this one. The browser is simply misreporting the size to us, then later telling us the correct size as expected, and trying to isolate exactly when and why the browser misreports the size is slow work.

                  Comment


                    #10
                    We also have the same issue with the toolbar buttons shrinking (to their correct width) on hover. Also, components using CSS text-shadow or box-shadow are too tall We can provide example screenshots if helpful.

                    We are using Chrome 61 (and 62 beta), the Enterprise Blue skin with SmartClient v11.0p_2017-02-04/PowerEdition. Everything looks fine in IE11.

                    Do you have an estimate when this might be fixed? Thanks much.

                    Comment


                      #11
                      This one has already been fixed and confirmed fixed by users (in another thread). You need the latest nightly.

                      Comment


                        #12
                        This issue still occurs with the latest nightly SmartClient_v111p_2017-10-09_Pro in Firefox 55.0.3 (32-Bit), Firefox 56.0 (32-Bit), Firefox 56.0.1 (64-Bit).
                        It is displayed correct in the latest Chrome Version (61.0.3163.100) and Internet Explorer (11).


                        Best regards

                        Comment


                          #13
                          We've tried to reproduce this on both FF 56.0 and 56.0.1, on both Windows and Mac machines, using the 11.1p nightly build from 10/9 without success.
                          Our process to test is to take the sample code from post #6 above, paste it into a new SmartClient enabled HTML page, with the Tahoe skin, clear browser cache and hit / refresh the page, then roll over the buttons.
                          We simply aren't seeing the shrinking effect in your screenshot.

                          Can you confirm which OS you're testing on.
                          Also it's probably worth sharing the entire source of the HTML page you're using to test this in case it differs in some subtle way from what we have.

                          Thanks
                          Isomorphic Software

                          Comment


                            #14
                            Sure.
                            With the code below i can reproduce the issue shown in #12

                            Code:
                            <!DOCTYPE html>
                            <html>
                            <head>
                            <title>test</title>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Core.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Drawing.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Charts.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/system/modules/ISC_Calendar.js"></SCRIPT>
                            <SCRIPT SRC="/isomorphic/skins/Tahoe/load_skin.js"></SCRIPT>
                            
                            <head>
                            <body>
                            <script></script>
                            <script>
                            Canvas.resizeControls(4);Canvas.resizeFonts(2);
                            isc.ToolStrip.create({
                                "ID": "theToolstrip",
                                "width": "100%",
                                "members":
                                [
                                    isc.Button.create({
                                        "ID": "theShortButton",
                                        "overflow": "visible",
                                        "title": "short text",
                                        "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
                                    }),
                                    isc.Button.create({
                                        "ID": "theLongButton",
                                        "overflow": "visible",
                                        "title": "longer Text Example",
                                        "iconSize": 16,
                                        "iconWidth": 16,
                                        "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
                                    })
                                ]
                            })
                            </script>
                            </body>
                            </html>
                            Best regards

                            Comment


                              #15
                              Hi Simon
                              We've tried your sample HTML file against multiple Firefox environments and are unable to reproduce the behavior you're seeing.
                              It's possible that there's something specific about your environment that is responsible for the problem (display density and zoom, browser plugins browser configuration, network latency loading the media, etc)

                              We *are* reproducing something similar in Safari, and are looking at resolving that. We'll follow up when we have a handle on that - possibly it'll resolve the issue you're seeing as well.

                              Regards
                              Isomorphic Software

                              Comment

                              Working...
                              X