Ngx-bootstrap: Add Datepicker auto placement option
The Datepicker has a placement option which can be set to one of 4 possibilities: top, bottom, left, right. It would be nice to have a fifth option, auto, in which the component picks the "best" of the previous 4. This would allow the component to be more flexible without having to set it for each use case.
For example, in our application, we built a component for use with the @angular2-json-schema-form library that incorporates the datepicker. However, depending on the form and its location, we need to specify a specific placement for the datepicker to prevent it from going off screen, as it appears center itself with the bound input. Having a auto option here would remove the need set specific placements.
Also, being that its bootstrap and responsive, having a auto placement would help when trying to support multiple resolutions. Consider the 2 column layout for example. On larger screens, you show the left hand column to the left in which the datepicker would be best represented with right placement. However, on smaller screens, the columns typically stack to converse space, in which a top/bottom placement would not only be preferred, but likely required. An auto option would help here I think.
jscharett
All 11 comments
+1
Valery-vs
on 4 Sep 2018
+1
afiqwazien
on 23 Sep 2018
+1 as I believe this feature is highly necessary when dealing with responsive layouts.
Something to note is what kind of behavior we would like the date picker to exhibit when drawing off screen. Would we like the date picker to automatically pick between a layout (top, bottom, left, or right) which will fit on the screen, or would we like the date picker to keep its layout but nudge itself to it's all visible?
Personally, I believe the default behavior should be to nudge itself back onscreen (with a config option to turn that off) and that we should also add an additional 'auto' layout which will pick the best fitting of the four regular layouts.
chase9
on 11 Oct 2018
+1 This feature is important when we make the responsive layout
MrHOY
on 16 Jan 2019
+1 This feature is important.
ankitvadariya
on 31 Jan 2019
I cloned the repo today to start work on this feature but it looks like the maintainers had read my mind!
This functionality is present in the current development build, and it looks like it was added in 66ae92d804779b0244e97bff6032632165000932.
Thank you for your hard work, everyone involved!
chase9
on 13 Feb 2019
This was merged with #5065 and is included in the 4.0 release.
chase9
on 1 Apr 2019
Closed as outdated, see https://valor-software.com/ngx-bootstrap/#/datepicker#adaptive-position
ludmilanesvitiy
on 13 Sep 2019
Closed as outdated, see https://valor-software.com/ngx-bootstrap/#/datepicker#adaptive-position
Is not complete. This feature handles only top and bottom boundaries, but there are also left and right.
cristianbalint
on 3 Feb 2020
Any solution for left and right position adjustment ?
UdayAppam
on 28 Feb 2020
@cristianbalint @KernelLora any solution for the left and right?
axell9641
on 18 Jun 2020
Related issues
MrBlaise
路
3Comments
tuoitrexuquang
路
3Comments
MihaiHoriaPopescu
路
3Comments
phmello
路
3Comments
hugonne
路
3Comments
Most helpful comment
+1 as I believe this feature is highly necessary when dealing with responsive layouts.
Something to note is what kind of behavior we would like the date picker to exhibit when drawing off screen. Would we like the date picker to automatically pick between a layout (top, bottom, left, or right) which will fit on the screen, or would we like the date picker to keep its layout but nudge itself to it's all visible?
Personally, I believe the default behavior should be to nudge itself back onscreen (with a config option to turn that off) and that we should also add an additional 'auto' layout which will pick the best fitting of the four regular layouts.