Auto positioning (new feature) not working when overflow: auto | scroll is applied (at least in datepicker)

[loxy]

Bug description:

Auto positioning is not working when a containing elements has the property overflow: auto | scroll although datepicker-append-to-body is set to true.

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/uKGjGCX1cxBnjY6dN0ha

Version of Angular, UIBS, and Bootstrap

• Angular: 1.5.0
• UIBS: 1.2.1
• Bootstrap: 3.3.6

[RobJacobs]

_EDIT_ See comment below

[loxy]

Sorry. Didn't get the point. It only works, if no ancestor of the element which has the datepicker directive attached to is not scrollable? I mean this a big restriction. Imagine the following scenario:

I use a container with overflow: auto because the table inside of it maybe is to big to fit the screen size. I have also a datepicker to filter some stuff inside of it. So the main reason I use append-to-body is to overlay the datepicker popup to NOT render it inside of that scrollable container. It is not user friendly to scroll that container to the end to see the datepicker after it opens (if height does not fit). This is the main reason to use append-to-body, in my eyes.

I didn't had a look at the implementation until now. Is it really not possible? I mean it work well when overflow is visible, even if it is rendered on body. The only important thing is to know the position of the input if attached to body, isn't it?

[RobJacobs]

I apologize, the append-to-body comment I made is wrong and shouldn't factor into the auto placement calc. The rule you need to understand is when calcing available space for the host element (input element with datepicker attached) where the target element will fit (datepicker popup) the closest scrollable ancestor of the host element is used.

For the example you provided, the host element is the first child of a scrollable element (.enforce class) with no top space available. Therefore, the auto positioning will never place the target element on top (above the input element with the datepicker attached).

[loxy]

The host element is irrelevant, because it is appended to body. And there is space...

[RobJacobs]

The host element is the input element, which is in the div element with a class of enforce. The class enforce sets overflow-x and overflow-y to auto which makes that div scrollable. We use the closest scrollable ancestor as the auto positioning boundary so it won't try and position the target outside of elements like a modal or popover.

[loxy]

Yeah, I understand. But in the case of "append to body" this is irrelevant. Maybe it would be possible to handle that case with an option?

[RobJacobs]

I'll make the change.

[loxy]

This was quick. Nice. Thank you!

[RobJacobs]

No problem, my only apprehension is now it could potentially try and position outside of a modal or popover, but it really doesn't make sense to use an append-to-body in those scenarios.

[loxy]

You are right. This would make problems, but indeed makes not much sense (at first sight). This is the reason I suggested an optional attribute...