sub menu style gross and shrinks

[acarur01]

I was hoping you'd be able to help me out with a styling problem I'm having. I have submenus which have titles that are of different widths.

If you run the testcase below, click on Manage -> Processes and hover over Information, now hover back to Process, You'll see the sub menu body has grown and now shows white background at the end.

Now reload the testcase and instead of hovering back to Processes, hover over all the sub menus - you'll see the menu body shrink and grow.

Could you tell me what is causing this? I don't see anything special in the styling so I'm not sure what would be causing this behaviour.

browser: FF12
SC 06-06-12 8.2p

isc.Menu.create({
        ID:"manageMenu$menu",
        fastCellUpdates:false,
        canFocus:true,
        showSelectedStyle:true,
        baseStyle:"cwAppSpecificSubMenu",
        showDown:true,
        data:
            [{title:"Processes",
            submenu:
            isc.Menu.create({
                ID:"processes",
                fastCellUpdates:false,
                baseStyle:"cwAppSpecificSubMenu",
                data:
                    [{title:"Information",ID:"information",_baseStyle:"cwAppSpecificSubMenu"},
                     {title:"Process Manager",ID:"proccessManager",_baseStyle:"cwAppSpecificSubMenu"},
                     {title:"Global Processes",ID:"global",_baseStyle:"cwAppSpecificSubMenu"},
                     {title:"Milestones",ID:"milestones",_baseStyle:"cwAppSpecificSubMenu"},
                     {title:"Message Queue",ID:"participantQueue",_baseStyle:"cwAppSpecificSubMenu"},
                     {title:"Stale Jeopardy Report",ID:"processesToBeStale",_baseStyle:"cwAppSpecificSubMenu"}
                     ]
            })
            }]
        });


isc.MenuButton.create({
    ID:"manageMenu",
    canFocus:true,
    title:"Manage",
    showDown:true,
    showFocused:false,
    showEmptyMessage:false,
    showRollOver:false,
    autoFit:true,
    baseStyle:"cwAppSpecificMenu",
    align:"bottom",
    showMenuButtonImage:false,
    menu:manageMenu$menu
    })

isc.HLayout.create({
ID: "testLayout",backgroundColor:"black",height:25,
members: [manageMenu]
})

css

.cwAppSpecificMenu{
    color:#ffffff;
    font-weight:bold;
    text-indent: 15px;
    font-size:11px;
    padding-left:4px;
    padding-right:4px;
    text-transform: uppercase; /* force text to uppercase */
}

.cwAppSpecificMenuDown{
    background-color: #4DACE7;
    color:#FFFFFF;
    font-weight:bold;
    font-size:12px;
    text-transform: uppercase; /* force text to uppercase */
}
.cwAppSpecificMenuFocused{
    background-color: #4DACE7;
    color:#FFFFFF;
    font-weight:bold;
    font-size:12px;
}

.cwAppSpecificSubMenu,.cwAppSpecificSubMenuOver{
    background-color: #53b0ea;
    color:#ffffff;
    font-weight:bold;
    font-size:9px;
}

.cwAppSpecificSubMenuOver{
    background-color: #0d7dc1;
}
.cwAppSpecificSubMenuDown{
    background-color: #000000;
}

[Isomorphic]

Looks like you have different font-size settings for the different states, so this will cause menu items to grow vertically on rollover.

[acarur01]

But if i remove all font styling I still get the same problem:

.cwAppSpecificMenu{
    color:#ffffff;

}

.cwAppSpecificMenuDown{
    background-color: #4DACE7;
    color:#FFFFFF;

}
.cwAppSpecificMenuFocused{
    background-color: #4DACE7;
    color:#FFFFFF;

}

.cwAppSpecificSubMenu,.cwAppSpecificSubMenuOver{
    background-color: #53b0ea;
    color:#ffffff;

}

.cwAppSpecificSubMenuOver{
    background-color: #0d7dc1;
}
.cwAppSpecificSubMenuDown{
    background-color: #000000;
}

[Isomorphic]

This doesn't reproduce the grow/shrink effect for us in Enterprise skin in the default SDK. Please confirm, then let us know if you can reproduce it outside your app. If not, some other CSS settings in your app must be involved.

[acarur01]

I was testing with Feature Explorer - tried with standalone and it works fine. So what if I do want different font size for when the user hovers? how do I make sure that my style is consistent when the menu grows horizontally?

[Isomorphic]

Menus autofit to the item height by default, but they are a subclass of ListGrid, so you could set fixedRecordHeights:true to avoid auto-sizing if you want to use different-sized fonts.

Not sure what you mean about consistent styling when growing horizontally.

[acarur01]

I don't have any problems with the height - its the width that is messing up. Sorry I didn't mention that before.

Here's a screenshot of it http://screencast.com/t/Fu80pQU3RIWT

[acarur01]

Notice in the video that when I get to the bottom sub menu, the blue background increases horizontally but moving back to over the other menus, the blue background shrinks and reveals an underlying style for the menu body

[Isomorphic]

We're not getting this effect with either the first or second set of CSS you posted. Adding a larger font-size to the "Over" style, which causes styling similar to your video, also does not reproduce this effect.

[acarur01]

Are you sure you're using 06-06-2012 build? This is completely outside of our product so I don't know why you would not be able to reproduce it. I'm running the sample in Firefox12 by saving the attached files in SmartClient_v82p_2012-06-06\smartclientSDK
then running the start_embedded_server.bat in port 8777 and then using Firefox, going to http://localhost:8777/style.html

[Isomorphic]

Please make sure to test things using the latest patched build or you can end up chasing already fixed bugs.

[acarur01]

Ok.

Tested it with SmartClient Version: v8.2p_2012-08-29/PowerEdition Development Only (built 2012-08-29). STILL an issue for me. I don't know how else to prove this. I cleared the cache of course and when I open jsDebugger I see it with the stamp "SmartClient Version: v8.2p_2012-08-29/PowerEdition Development Only (built 2012-08-29)" at the bottom

[acarur01]

Just tried in another machine as well and same issue.

[Isomorphic]

What is the actual CSS you're using for this test? Your video shows styling that is different from either of the two CSS snippets you shared.

What OS are you using?

Do you have any Firefox extensions installed in both environments?

If you use Firebug to try to figure out what element has the mystery blue border, which is it?

[acarur01]

I am using those exact files I gave as attachments. I do not have any extensions. I'm using Windows 7. The blue background is set on the menu items. the white background comes from menuMain and can only be seen once I've hovered over the Stale Jeopardy Report menu and then back to the smaller menus