Clever Geek Handbook

Datepicker partially hidden by scrolling overflow

enter image description here

I am creating a bootstrap column inside which I have a panel.

Inside this panel I have a datepicker and there must be many other controls in there, so I would need to scroll down (y-axis only) inside the panel.

Unfortunately, the datepicker popup is partially hidden due to the overflow-z and overflow-x style, allowing scrolling:

<div style="height: 480px;overflow-y: scroll;overflow-x:hidden;">
...
</div>

Is it possible to overcome this with a CSS trick?

I found an answer on SO where the dropdown can be placed outside the div, but in my case I am using a directive from the Angular-strap library, so I need to place it inside.

I created a plunker to illustrate the problem (you need a full view to see it): plunker

+3


source to share


1 answer


Well, since no one bothered to answer, I just found an answer today, which was actually very simple.

I just need to add this to the attributes:



data-container="body"

Plunker here

+9


source






More articles:


All Articles