How to make a web user control show on the top?

[Guest]

Hello, friends,

We created a drop-down menu bar and a show/hide calendar web user controls
mainly using javaScript and html.

However, they both have the problem that they are not dispaly as the top
controls in IE browser. Rather, text box, file field, and etc. are on the
top. As a result, our calendar and drop-down menu bar were "cut" here and
there wherever there is one of those boxes.

Any idea on how to solve this problems?

I tried to Z-Index, it did not help a lot.

Thanks a lot.

 

[tdavisjr]

What I remember from using drop-downs is that they ALWAYS show up on
top even if you place and element right over and increasing the z-order
for it. I think this is the default behavior in IE , I don't know
about Firefox. Texboxes, radiobuttons, and other control allow
elements to be placed over it; but drop-downs always seem to want to
display as the top level element. Maybe this is just in IE. Try
viewing everything in FireFox and see if it looks different.

 

[Peter Rilling]

What I usually do is when the menu content is activated, I would
programmatically hide the primitive controls (i.e. textbox, dropdown, etc.)
Then when the menu no longer has the focus, re-display them. I believe the
reason for this is that those controls are actually "windows" that are
overlayed on the broswer. Therefore they do not interact well with dynamic
content.

 

[Guest]

it mainly uses <div> <ul> to show or hide

 

[Guest]

But, we may have a lot pages, to programmatically hide primitive controls is
really a lot work, and hard to maitain in future. Moreover, it may not look
nice when user seeing primitive controls showed/dispeared from time to time...

 

[Peter Rilling]

I have not found any other way around it.

If your menu is the only thing that is overlapping with the primitive
controls, then you would have code in that which cycles through all the form
elements on the page and hides them. Also, rather than hiding them all, you
can determine the area of the page where your menu will appear and then hide
only those form elements which overlap. Another thing is that if you want
the controls to remain on screen, you could probably show an image of the
control when the actual control is hidden.

These are just some thoughts.

 

[Mark Milley]

This sounds like a HTML positioning problem.

Here's the deal -

Each element on the page has a property called a z-index (zIndex in
Javascript) that determines where it lies on the z-axis (depth) of the
page. Items with a higher z-index are rendered on top of items with a
lesser z-index.

It's important to note that you can only change this value if you set
the position: of the element to position:relative or position:absolute.

However, merely tweaking the z-index of your calendar control may not
be enough; you may have to fiddle with the z-indexes of the surrounding
elements in order to get the result you're looking for.

That said, this is only necessary if you are using relative positioning
("flow layout"). In the event that you are using absolute positioning,
you can instead rely on this rule of thumb:

Items that are declared later in the html code are by default rendered
on top of items declared earlier. So if you can, declare your calendar
control near the end of the form, then use the top and left style
elements to position the calendar control in the correct visual
location. (Note that you can use this if you are using relative
positioning as well, but the results won't be as solid.)

Check this MSDN article for details on z-indexing:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zindex.asp


-Mark

 

[Christopher Reed]

Look into CSS absolute positioning.

 

[Guest]

I have a question regarding this... Does this problem get resolved in any way
in VS 2005?