CODEWITHSUNDEEP
reactjsdaterangepickerrsuite
S.R
S.R

Reputation: 75

How to change the position of the menu in rsuite DateRangePicker?

I'm using rsuite DateRangePicker and the component is displayed on the right. When I open the menu to select a date, the menu get out of the page container and I have to scroll the page to the right in order to see the entire menu.

menu overflows

I'm looking for a way to change the position of this menu, any idea?

Upvotes: 0

Views: 2824

Answers (3)

Oleg Zinchenko
Oleg Zinchenko

Reputation: 631

In my case I added placement='bottomEnd' and preventOverflow

<DateRangePicker
  size='md'
  placeholder='Select Date Range'
  block
  format='dd MMM yy'
  showOneCalendar
  placement='bottomEnd'
  preventOverflow
  ranges={Ranges}
  onChange={changeHandler}
/>

enter image description here

Upvotes: 1

Simon Guo
Simon Guo

Reputation: 93

DateRangePicker provides a placement property. You can set its value to bottomEnd or auto.

<DateRangePicker  placement="bottomEnd" />

Upvotes: 2

superman66
superman66

Reputation: 46

You can set placement="auto" to auto adjust the menu position. More about placement usage, you can visit:https://rsuitejs.com/components/date-picker

Upvotes: 1

Related Questions