View Full Version : Viewport & CSS Menu Problem

2 Nov 2009, 10:13 AM
My question is the same to a previous post ( (https://www.extjs.com/forum/showthread.php?t=54382)http://www.extjs.com/forum/showthread.php?t=84069) which never was answered. Using Ext.Viewport, I load a CSS menu in the north region. When I mouse over the menu, the menu items drop down but the items appear below the center region panel. I have been unable to get this to work. I tried setting the z-index based on information in a similar post but to no luck. Can anyone figure this out?


2 Nov 2009, 7:18 PM
I'm also working on this. it's because the css menu is wrapped in one region of the viewport. it's just won't work no matter how big you set the z-index.

3 Nov 2009, 4:57 AM
I have been fooling with this problem for days. I tried to get it to work under Firebug but to no avail. I'm just not a smart enough CSS developer to figure it out. Maybe one of the Ext experts will be kind enough to suggest a solution. I would think there is some way to resolve it. I really need this to work in a Viewport since I need the dynamic functionality provided by that component.

18 May 2010, 4:02 AM

I have the same problem...
Did you find a solution?



18 May 2010, 9:11 AM
My viewport code:

new Ext.Viewport({
forceFit: true,
hideMode: "offsets",
layout: "border",
hideBorders: true,
items: [
region: "north",
contentEl: "divMenu",
height: 85
region: 'center',
layout: 'fit',
frame: false,
border: false,
margins: '5 5 0 0',
items: [CreateMapPanel(map)]

"divMenu" contains de div with my menu...

Any ideia?


24 May 2010, 1:12 PM
I've come across the same issue with the navigation menu not being able to excess its region. I've solved the issue by assigning the region an id and creating a CSS definition.

var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
border: false,
items: [{
height: 60,
region : 'south',
contentEl: 'page-footer',
border: false
}, {
region : 'center',
contentEl: 'page-main',
border: false
}, {
height : 90,
id: 'page-header-panel',
region : 'north',
contentEl: 'page-header',
border: false
#page-header-panel .x-panel-body,
#page-header-panel .x-panel-bwrap {
overflow: visible;

11 Jan 2011, 10:19 AM
I am able to use this solution in Chrome and IE 8 but it doesn't work in IE 7, it displays behind the center region. Any suggestions?