Announcement

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

    Menu positioning off page

    SmartClient v9.0p_2014-01-08
    Chrome 32.0.1700
    IE 8-10

    In short, here is what I am attempting:
    Code:
     ----------------------------------------------
    | HLAYOUT width=100%                           |
    |                                              |
    | [ LABEL width=*             ] [ MENUBUTTON ] |
     ----------------------------------------------
    Using the following code:
    Code:
    // Create Menu (taken from example)
    var mymenu = isc.Menu.create({
        autoDraw: false,
        showShadow: true,
        shadowDepth: 10,
        data: [
            {title: "New"} // , {}, .....
        ]
    });
    
    // Create HLayout
    var myhlayout = isc.HLayout.create({
        width: "100%",
        members: [
            isc.Label.create({
                width: "*",
                contents: "TITLE"
            }),
            isc.MenuButton.create({
                title: "MENU",
                menu: mymenu
            })
        ]
    });
    When the menu button is clicked, the menu is rendered partially off-screen, adding horizontal scroll bars. I believe this is due to the shadow's sizing; when showShadow is false, the menu is positioned properly.

    #2
    Menu Tracking Issue

    Hi,

    We're also having similar issues although we have showShadow : false ... Mouse tracking
    for menus is somewhat screwed under IE. Works fine on FireFox. See attached screen shots:

    We get this on version SmartClient_v90p_2014-01-24_Pro.

    Here's the code we use:

    Code:
    		this.settingsButton = IMenuButton.create
    		({
    			thisPortlet : this,
    			layoutAlign : 'center',
    			size : 16,
    			capSize : 0,
    			showTitle : false,
    			showRollOver : true,
    			showDown : false,
    			canFocus : true,
                            showFocused : false,
    			showMenuButtonImage : false,
    			src : 'general/preferences.png',
    			canHover : true,
    			hoverWidth : 50,
    			hoverDelay : 1000,
    			menu : Menu.create
    			({
    			    autoDraw: false,
    			    showShadow: false,
    		            data : menuData
    			}),
    			getHoverHTML : function ()
    			{
    			    return 'Settings';
    			}
    		});
    Any ideas ?

    Thanks,
    Attached Files
    Last edited by yavery; 18 Feb 2014, 17:20.

    Comment


      #3
      Can anyone show a test case that reproduces the issue?

      The OP test case doesn't. There's a brief jitter due to the shadow, where it looks like the Menu is placed twice, but there are permanent browser-level scrollbars.

      The jitter disappears if shadows are disabled so we have no idea how to get even a momentary cosmetic issue with shadows off.

      Comment


        #4
        Originally posted by Isomorphic View Post
        Can anyone show a test case that reproduces the issue?

        The OP test case doesn't. There's a brief jitter due to the shadow, where it looks like the Menu is placed twice, but there are permanent browser-level scrollbars.

        The jitter disappears if shadows are disabled so we have no idea how to get even a momentary cosmetic issue with shadows off.
        Reproduces the issue I posted or yavery's?

        I added #'s to the menu item for reference, attached screenshots of outcome
        Attached Files

        Comment


          #5
          Our post was addressed to yavery, but being able to reproduce either issue would be good, and unfortunately an animated .gif does not bring us closer.

          Once thing to check is whether you are using the correct DOCTYPE (see FAQ), and whether you can reproduce the problem if you remove all CSS in the page that didn't ship with SmartClient.

          Comment


            #6
            Originally posted by Isomorphic View Post
            Our post was addressed to yavery, but being able to reproduce either issue would be good, and unfortunately an animated .gif does not bring us closer.

            Once thing to check is whether you are using the correct DOCTYPE (see FAQ), and whether you can reproduce the problem if you remove all CSS in the page that didn't ship with SmartClient.
            The code provided in the original post demonstrates the bug.
            I added the surrounding HTML for you:

            Code:
            <!doctype html>
            <html lang="en">
            <head>
            	<meta charset="UTF-8">
            	<title>Menu bug</title>
            
            	<base href="//www.smartclient.com">
            	<script>var isomorphicDir="http://www.smartclient.com/isomorphic/";</script>
            	<script src="docs/9.0/a/b/development/ISC_Core.js?isc_version=9.0.js"></script>
            	<script src="docs/9.0/a/b/development/ISC_Foundation.js?isc_version=9.0.js"></script>
            	<script src="docs/9.0/a/b/development/ISC_Containers.js?isc_version=9.0.js"></script>
            	<script src="docs/9.0/a/b/development/ISC_Grids.js?isc_version=9.0.js"></script>
            	<script src="isomorphic/skins/Enterprise/load_skin.js"></script>
            </head>
            <body>
            
            <script>
            // Create Menu
            var mymenu = isc.Menu.create({
            	showShadow: true,
            	data: [{ title: "0 1 2 3 4 5 6 7 8 9 A B C D E F" }]
            });
            
            // Create HLayout
            var myhlayout = isc.HLayout.create({
            	width: "100%",
            	members: [
            		isc.Label.create({
            			width: "*"
            		}),
            		isc.MenuButton.create({
            			menu: mymenu
            		})
            	]
            });
            </script>
            
            </body>
            </html>
            As you will see, and as the gif demonstrates, the menu is positioned incorrectly.
            Attached Files

            Comment


              #7
              This is pulling an out-of-date, internal copy of 9.0 files from the website. Use the latest.

              Comment


                #8
                Originally posted by Isomorphic View Post
                This is pulling an out-of-date, internal copy of 9.0 files from the website. Use the latest.
                As mentioned in the OP, I originally found the issue on v9.0p_2014-01-08.

                I just downloaded v9.0p_2014-02-20 and it exists there, as well.

                Updated the script tags in the example... the attached is pointing at your 2014-02-14 build.
                Attached Files

                Comment


                  #9
                  We've now made a change to address this issue. Please try the next nightly build (March 5) - 9.0p, 9.1p or 10.0d branches

                  Regards
                  Isomorphic Software

                  Comment

                  Working...
                  X