search

uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.06k forks source link

z-index being improperly set #1349

Open appdevdesigns opened 9 years ago

appdevdesigns commented 9 years ago

I'm using bootstrap-datepicker in a project where it sits next to another widget.

In Safari, the z-index is being manually set to 10. However, the widget that it sits next to is set to 999. So whenever the date picker drop down is displayed, it shows up UNDER the widget next to it.

In Firefox, the z-index is not set, so this behavior is not apparent.

Solution: you are already attaching a .datepicker-dropdown class to the drop down. Simply let us developers customize that class with our own z-index value so that we can make sure it is properly positioned on our pages.

Don't manually set it in code.

acrobat commented 9 years ago

This PR #1242 could fix this issue!

Azaret commented 9 years ago

I would like to test the PR, I've some cases like bs-dp inside modals. If it's working without my tweaks for the old version I can rebase it.

That said, @appdevdesigns have a point I agree with, souldn't bs-dp have the z-index set in css or rather not set at all (or have an option to disable it)? and let devs set it properly in css. There is many cases where the calculated z-index is a bad design.

Azaret commented 9 years ago

Looks like the PR is not working. image

z-index is set to 10 while parent is at 1040, and still set at 10 even if I've a css rule on .datepicker setting z-index at 3000.

CheapSk8 commented 9 years ago

I'm curious what the conditions are around the test above not applying. I tested this change, and have it live in a web app supporting FF, Chrome, and IE 8+. But there could be a condition I didn't catch in testing. There is an alternative as mentioned in the OP, and that is to simply comment out the z-index in the placement and expect that the user has all CSS in place to handle it.

Azaret commented 9 years ago

So far my workaround have been to stay on the old version. Do you want me to run new tests ? It might have been fixed since then.

I'm not fan of workaround which consist of editing lib code ;)

Azaret commented 9 years ago

Tried on the last version and it looks fine.

rosskevin commented 8 years ago

I have a situation where a sibling element (not parent) is absolutely positioned. In this rare case, hardcoding the z-index with !important works i.e.

.datepicker-dropdown {
  z-index: 1036 !important;
}