menu items appearing below other content

144 views
Skip to first unread message

Chase Yarbrough

unread,
Dec 7, 2007, 7:33:13 PM12/7/07
to Google Web Toolkit
I'm having a hard time getting my menus to appear above the rest of
the content on my page. In the Kitchen Sink demo it just seems to
work, but I've had no such luck. I've tried changing the z-index of
all the MenuItems and MenuBars to a very high number, but still no
dice! Any help?

Thanks,
Chase Yarbrough

Reinier Zwitserloot

unread,
Dec 8, 2007, 4:02:28 AM12/8/07
to Google Web Toolkit
Above has multiple meanings. Do you mean that your menu is being
'overwritten' by other stuff (z-axis), or do you mean that it's
showing up at the bottom of the page (y-axis)?

Assuming z-axis for a moment, be aware that z-index doesn't break
through tag structure. In other words, the following dialog box will
still be UNDER everything:

<div style="z-index: -1;"><div style="z-index: 1000000;">This content
will render BELOW everything!</div><div>But this will render even
lower</div></div>

In other words, z-index only decides how an element renders relative
to its siblings. Other than that, z-index has no known bugs that I'm
aware of. If you are setting it using DOM.setStyleAttribute, make sure
you use the javascript version of z-index, which is zIndex (take out
all hyphens and capitalize the letter that followed the hyphen), or it
doesn't work on half the browsers.

Lastly, for elements with equal z-index (and all elements have a
silent z-index of 0 if you don't specify anything), rendering order is
established according to DOM order; the LAST element added to the DOM
is rendered on top. So one solution is to just add your menu last, as
it were. That works as long as none of its siblings have z-index.

Peter Blazejewicz

unread,
Dec 8, 2007, 1:35:55 PM12/8/07
to Google Web Toolkit
hi,
do you have flash (flash plugin or ohter plugins) content on page?
regards,
Peter

On Dec 8, 1:33 am, Chase Yarbrough <ver...@gmail.com> wrote:

Chase Yarbrough

unread,
Dec 12, 2007, 3:43:48 PM12/12/07
to Google Web Toolkit
The problem was that I was adding my GWT app to a div that had a z-
index of 1. Although changing my menus to z-index of 10000 seems like
it still should have made them appear above, when I changed the div
containing my GWT app to a z-index of 0, my menus began to work
correctly.

Thanks,
Chase

On Dec 8, 10:35 am, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
> > Chase Yarbrough- Hide quoted text -
>
> - Show quoted text -

Reinier Zwitserloot

unread,
Dec 12, 2007, 6:57:50 PM12/12/07
to Google Web Toolkit
Chase, I get the feeling you didn't read my previous post. Review it.

Chase Yarbrough

unread,
Dec 14, 2007, 1:56:22 AM12/14/07
to Google Web Toolkit
I did read your previous post. When I changed the z-index for the div
containing _the whole GWT application_ elements /within the GWT
application/ began appearing in different relative orders. Changing
the outer z-index shouldn't change the relative order of inner z-
indices, but it does!
Reply all
Reply to author
Forward
0 new messages