Results 1 to 5 of 5

Thread: [4.1 B2] Button menu separated from shadow

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    247
      0  

    Default [4.1 B2] Button menu separated from shadow

    REQUIRED INFORMATION Ext version tested:
    • Ext 4.1 rev B2

    Browser versions tested against:
    • IE8
    • FF5 (firebug 1.8.1)

    DOCTYPE tested against:
    • strict

    Description:
    • Button menu is separated from its shadow. The shadow is in the right place, but the menu is not. Happens on IE 8 and FF 5. Layout is just fine when run from the file system, but is detached when run from a Windows 2008 webserver with IIS7. We have projects on Ext 2.2, 3.x, and 4.0.7 running on that same server successfully. Running the same script on 4.0.7 works ok.

    Steps to reproduce the problem:
    • click on the button to reveal its menu

    The result that was expected:
    • the menu should be directly below the button

    The result that occurs instead:
    • The menu's shadow is where it should be, but the button's menu is not.

    Test Case:
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Tabs Example</title>
        <!-- Ext includes -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../resources/css/BoxSelect.css" />
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript" src="../../BoxSelect.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create('Ext.Button', {
                    text: 'Menu button',
                    renderTo: Ext.getBody(),
                    arrowAlign: 'bottom',
                    menu: [
                        { text: 'Item 1' },
                        { text: 'Item 2' },
                        { text: 'Item 3' },
                        { text: 'Item 4' }
                    ]
                });
            });
        </script>
        
    </head>
    <body>
    
    </body>
    </html>
    HELPFUL INFORMATION Screenshot or Video:
    • attached

    See this URL for live test case: N/A Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • WinXP Pro



    menu_shadow.PNGscreenshot is from IE8. FF5 is similar.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Vote Rating
    1297
      0  

    Default

    I don't have IE8 but on Chrome 16, FF4, IE6 this all looks as expected.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    247
      0  

    Default

    On our corporate images 70% of folks have IE7 and 30% IE8 and some 15-20% have FF5. I can test IE9 at home off of the corporate image as well as Chrome 17 and FF 9, but those I can only test on the file system or on my Apache platform. Since all of the dev work I do is for corp imaged machines I've been trying to debug 4.1 Beta on the IE8 / FF5 machine only.

    The screenshots I did before were from IE. Here is what I'm seeing on FF when published to our corp Windows 2008R2 server. First is the 4.1 Beta 2 screenshot. The second one I pointed to 4.0.7 gpl and republished. Both taken using FF5 with firebug 1.8.1 on a Windows XP Pro box.

    4.1 B2
    menu_shadow_ff.PNG
    4.0.7 gpl
    menu_shadow_ff_on_407.PNG

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    247
      0  

    Default

    I was having some difficult with compatibility mode in IE and I turned that off to make sure that wasn't causing problems in IE. Still see the shadow disconnect with IE running in browser mode: IE8 and document mode: IE8 Standards.

    And still in FF, as well, but have only had a chance to test on FF5 with firebug 1.8.1.

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    247
      0  

    Default

    1000 apologies.
    I figured it out. In the past when auditioning code I'd take an existing file and point the ext-all.js lib to the new version and test. If all's well then I'd roll apps over to a newer version. Not a great practice if I don't also point to the latest css file, too. When no one else was complaining or could reproduce the anomalies I knew it was something I was doing, but couldn't figure out what.

    Sorry for the wasted effort looking for bugs that just weren't there. Please consider this thread closed.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •