I'm looking at the code generated by datePicker and it appears to apply a z-index of 1 to the generated div. Try setting the z-index of your panel to zero.
Another option is to go into jquery.ui.css and seeing if you can modify the ui-datepicker class (though it appears the z-index is actually written as a style attribute, which might require changing it in code).
[EDIT]
Looking into it further, I guess it doesn't default to 1, exactly, but rather one more than whatever element it is applied to.
That's pretty open ended. I have not come across an issue in the past where dropdown lists work fine in all but droid browsers. This could be any number of causes. Perhaps with your absolutely positioned divs, something is rendering over the top of the
drop down list in android, causing it not to capture the click event?
"Dream as if you'll live forever, live as if you'll die today." --James Dean
TRIMS30
Member
162 Points
155 Posts
How to set ZIndex
Dec 26, 2012 05:44 PM|LINK
Am trying to use Jquery DatePicker and need to have the calendar appear on top of currently displayed panel.
Here's what's happening..... Panel is covering calendar - need Calendar on top.
My Code:
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title></title> <meta name="HandheldFriendly" content="True" /> <meta name="viewport" content="width=device-width" /> <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" /> <script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="_scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#txtDate").attr("readonly", "readonly"); $("#txtDate").datepicker(); }); </script> </head> <body bgcolor="#cccccc"> <form id="form1" runat="server"> <div> Select a date: <br /> <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Height="16px"></asp:TextBox> <br /> <asp:Panel ID="Panel1" runat="server" BackColor="Yellow" Height="85px" style="z-index: 1; left: 10px; top: 69px; position: absolute; height: 85px; width: 290px"> </asp:Panel> <br /> </div> </form> </body> </html>AceCorban
Star
12320 Points
2270 Posts
Re: How to set ZIndex
Dec 26, 2012 06:18 PM|LINK
I'm looking at the code generated by datePicker and it appears to apply a z-index of 1 to the generated div. Try setting the z-index of your panel to zero.
Another option is to go into jquery.ui.css and seeing if you can modify the ui-datepicker class (though it appears the z-index is actually written as a style attribute, which might require changing it in code).
[EDIT]
Looking into it further, I guess it doesn't default to 1, exactly, but rather one more than whatever element it is applied to.
http://forum.jquery.com/topic/z-index-1-datepicker-1-8
Setting the z-index of the panel might still work, or maybe you can try setting the z-index of the textbox you are applying datepicker too?
[/EDIT]
TRIMS30
Member
162 Points
155 Posts
Re: How to set ZIndex
Dec 27, 2012 02:53 AM|LINK
Ace:
Thanks for the help - works Ok with panel ZIndex=0
Now have another issue you may be able to help with....
Trying to create a web page that will run on SmartPhone.
Works ok on Ipad, Iphone, Desktop but not Driod Browser.
Intermittently, dropdown lists cease to function... ie; tap on them and nothing drops down or if it does drop down, the selected item does not change.
Tearing my hair out (what little I have) over this.
Regards,
Lee
AceCorban
Star
12320 Points
2270 Posts
Re: How to set ZIndex
Dec 27, 2012 03:19 PM|LINK
That's pretty open ended. I have not come across an issue in the past where dropdown lists work fine in all but droid browsers. This could be any number of causes. Perhaps with your absolutely positioned divs, something is rendering over the top of the drop down list in android, causing it not to capture the click event?
TRIMS30
Member
162 Points
155 Posts
Re: How to set ZIndex
Dec 29, 2012 02:25 PM|LINK
Rewrote app and moved most dropdowns to another web page and all is working now.
Thanks fot your help.
Lee
asteranup
All-Star
30184 Points
4906 Posts
Re: How to set ZIndex
Dec 31, 2012 03:17 AM|LINK
Hi,
Put your yellow panel to a lower z-index value. a negative value.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog