search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

DatePicker/DateRangePicker: placement options for both axis #5283

Open arturhun opened 5 years ago

arturhun commented 5 years ago

Please extend the number of available placement options, to include both axis.

Use case: A left- or right-side column on a page, containing a form with a set of filters. DateRangePicker with placement bottom doesn't fit into viewport and gets clipped, as the bs-daterangepicker-container element acquires the following inline style:

    position: absolute;
    display: block;
    top: 869px;
    left: -69px;

Screenshot 2019-06-19 at 13 45 53 the screenshot shows the bottom left corner of a browser window

In order to override it, one would have to apply global style change, as the element is places as a child of <body>. The override would not be precise at all times, in the first place.

Suggestion:

placement: 'bottom left'

(eg. to align left edges of the input and the container, when you have left-hand column)

or

placement: 'bottom right'

(eg. to align right edges)

Ideally, there could be a setting to control whether the inline css is added to the element at all. Inline style has the highest possible specificity and is hard/impossible to override. If user chose not to, then the element would only acquire css classes that reflect intended placement:

<bs-daterangepicker-container class="datepicker-placement-horizontal-left date-placement-vertical-bottom">

which would allow for controlling positioning via css relative to the viewport.

JGhignatti commented 4 years ago

Any updates for this one?