Description
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;
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.