close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

datepicker z-index

Thread began 4/16/2011 12:54 pm by CraigR | Last modified 5/05/2011 5:16 pm by CraigR | 3611 views | 13 replies |

CraigRBeta Tester

datepicker z-index

my datepicker appears behind the menu navbar when the browser window is small.

i tried editing the relevant jquery-ui.css by adding

.ui-datepicker
{
z-index: 1000;
}



but it doesn't have any effect

Sign in to reply to this post

Jason ByrnesWebAssist

When dealing with z-index, you need to also specify a position:
.ui-datepicker
{
position: relative;
z-index: 1000;
}

If that does not work, can you send a link where i can see the problem to trouble shoot.

Sign in to reply to this post

CraigRBeta Tester

HI Jason.

Here is a screenshot example, and here is a link to the page...

event_insert.php

thanks

Sign in to reply to this post

Jason ByrnesWebAssist

the j-query javascript is dynamicly resetting the z-index to 1 and the position to absolute.

when figuring the z-index stacking order, each position type has its own layer.

the relative layer is always below the absolute layer.

in the CSSMenuWriter/cssmw/menu.css file, change the position:
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}

from relative to static so that the menu layer will be above the absolute layer.

ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: static;
white-space: nowrap;
z-index: 100;
}

Sign in to reply to this post

CraigRBeta Tester

thanks jason, that sorted it.

Sign in to reply to this post

Jason ByrnesWebAssist

No worries.

Sign in to reply to this post

CraigRBeta Tester

oops, not quite sorted.

I noticed that the proposed fix, in setting the ul#cssmw li attribute from relative to static causes another issue.

With this in place, the submenus no longer work, and when you mouseover the nav bar, instead of the submenu, a scrollbar appears on the right

Alternatively

...Could an alternative 'solution' be to change the position of the datepicker relative to the text field being edited ?

By default it seems to appear below the field. If the field is near the bottom of the page, the datepicker appears above.
Is it possible to force it to the side ?

Sign in to reply to this post

CraigRBeta Tester

After a bit of fiddling, I still haven't worked this out.

Other than moving the field down the page, i don't know what else to try.

Any input appreciated

Sign in to reply to this post

Jason ByrnesWebAssist

you can change the positioning of the date picker by adding this to the javascript code:

beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px',
zIndex: '1000'
});





so the default datepicker code block will look like:

$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1
});
});



this is an example of the beforeShow code added to it:

$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'mm/dd/yy',
showAnim: 'show',
onClose: closeDatePicker_datepicker_1,
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px',
zIndex: '1000'
});
}
});
});



it may fix the issue to just include the zIndex: '1000' in the beforeShow

Sign in to reply to this post

CraigRBeta Tester

hi Jason,

i tried that, and still no joy.

looking in firebug, the datepicker still has a zindex of 1 and position absolute.

page attached, if it helps

Attached Files
event_insert.zip
Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...