How to bring Canlendar control from back to front?

  • Thread starter Thread starter tom
  • Start date Start date
T

tom

Hi,

I want a listbox below a hidden calendar control. The
problem is that the listbox will shadow the calendar when
the calendar is visible. How can I bring the calendar from
back to front?

Thanks in advance.
 
Hi Venugopal,
Thank you very much for your response.
Could you please explain to me how to set the Z-Index of
the control?

Thanks,
 
Hi,

Z-Index must be set trought the style of Your control. It will be found looking at the HTML code of Your ASPX page. For example :

<asp:textbox id="FirstName" style="Z-INDEX: 104" runat="server" Height="20px" Width="168px"></asp:textbox>

Control with Greater Z-Index goes to front and smaller Z-Index goes behind. So with this You can arrange the presentation in any form You like.

I hope this could help You


Luiz
Brazil
 
Hi Luiz,

I still couldn't let the Calendar control on the top of
the dropdownbox and listbox by trying z-index. It seems
that style z-index doesn't work with dropdown box and
listbox. Any ideas?

Thanks!
-----Original Message-----
Hi,

Z-Index must be set trought the style of Your control. It
Click to expand...
will be found looking at the HTML code of Your ASPX page.
For example :
<asp:textbox id="FirstName" style="Z-INDEX: 104"
Click to expand...
runat="server" Height="20px" Width="168px"> said:
Control with Greater Z-Index goes to front and smaller Z-
Click to expand...
Index goes behind. So with this You can arrange the
presentation in any form You like.
I hope this could help You


Luiz
Brazil



"tom" <[email protected]> escreveu na
Click to expand...
mensagem news:[email protected]...
 
Hi

Sorry, but in fact I forgot to mension something that I had realized before.

The Z-Index only makes diference when You are using absolute positioning on your HTML. Absolute positioning means that You are defining the exact position of your control on the page and the control position will not be related to any other element of the page.

Just for a test in a new page, try to add this HTML code

<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 144px; POSITION: absolute; TOP: 104px"
runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 101; LEFT: 184px; POSITION: absolute; TOP: 112px"
runat="server"></asp:TextBox>

Look at the visual result. The upper text box is over the other one.

Now change the values of the Z-Index to be like this :

<asp:TextBox id="TextBox1" style="Z-INDEX: 100; LEFT: 144px; POSITION: absolute; TOP: 104px"
runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 101; LEFT: 184px; POSITION: absolute; TOP: 112px"
runat="server"></asp:TextBox>

Look again. The upper text box is now under, right?

Gook look

Luiz


..
 
Luiz,

But it doesn't work if try one textbox with one
dropdownbox or listbox.

Thanks,
-----Original Message-----
Hi

Sorry, but in fact I forgot to mension something that I had realized before.

The Z-Index only makes diference when You are using
Click to expand...
absolute positioning on your HTML. Absolute positioning
means that You are defining the exact position of your
control on the page and the control position will not be
related to any other element of the page.
Just for a test in a new page, try to add this HTML code

<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT:
Click to expand...
144px; POSITION: absolute; TOP: 104px"
runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 101; LEFT:
Click to expand...
184px; POSITION: absolute; TOP: 112px"
runat="server"></asp:TextBox>

Look at the visual result. The upper text box is over the other one.

Now change the values of the Z-Index to be like this :

<asp:TextBox id="TextBox1" style="Z-INDEX: 100; LEFT:
Click to expand...
144px; POSITION: absolute; TOP: 104px"
runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 101; LEFT:
Click to expand...
184px; POSITION: absolute; TOP: 112px"
runat="server"></asp:TextBox>

Look again. The upper text box is now under, right?

Gook look

Luiz


..


<[email protected]> escreveu na
Click to expand...
mensagem news:[email protected]...
 
Sorry but with dropdowns it really sucks....

Look at this link
http://msdn.microsoft.com/msdnmag/issues/0900/web/default.aspx

You will see this Q&A

Q My Web site uses dropdown menus. When a menu drops down over a SELECT listbox, the listbox always seems to move to the top of the z-order. I've tried the z-index style, but it does not work. The simple sample I created proves this point (see Figure 3). Am I dealing with a bug, or some other unusual problem that has a kludgy workaround? Nothing I've tried seems to work.

A This is a common issue with dropdown menus and other forms of layer positioning. An important thing to understand about implementing dropdown menus on a Web page is that there are several types of objects you can put in a page that will clip the menu when it is displayed. The select/listbox form items as well as <iframe> elements will be drawn on top of a dropdown menu, which is displayed using absolute positioning with a <div> element. It is not a bug in the browser that causes this; it's more of a complex interaction of parent/child windows and clipping regions. The best workaround is to design your pages so that all dropdown menus are far enough away from other boxes, frames, and so on, to prevent this clipping behavior. Another method I've seen is to hide the listboxes or other items when a dropdown is activated.
When you go to the MSDN® Library (http://msdn.microsoft.com/library), the menu bar is displayed, but not the dropdown menus themselves because they would have gotten clipped by the frames that are displaying the tree structure and document contents.
Like it or not, HTML and scripting is no substitute for full-featured application programming. While it may seem to you that with each version of the browser more and more complex capabilities are exposed, it will probably be a while before everything you can do in Visual Basic® or C++ can be accomplished with HTML and scripting.
 
Back
Top