Calendar component constant height

[tapz]

It's really annoying to use the calendar to browse dates when the prev and next button location changes when the months have different number of days and weeks. How can I set the calendar height to be constant? E.g. number of weeks? That would be good UX.

[qwadrox]

@tapz Hi.

For me, the position of the previous and next buttons stay the same. Which theme are you using? Latest PrimeReact?
The best would be if you could modify one of the examples from the docs on stackblitz to see what's happening: https://primereact.org/calendar/#floatlabel

[tapz]

@qwadrox The problem is that in the touch-ui mode the calendar is centered vertically and as some months have more weeks than the others the calendar moved vertically. I guess that is the same in all themes.

[qwadrox]

@tapz I see now, and yes the button's visual position slightly changes, but its tappable hit area remains effective without moving the cursor. For me, it only changes a few pixels and not bothering at all. Does not affect the functionality.

On the other hand, if you wish, here is what you can try on the .p-datepicker-touch-ui.div:

position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
z-index: 1101;

With this, the div will be only transformed on the X axis and the vertical alignment will solely depend on the top property. So it will stay in the same position vertically when the size of the div changes. Or you can give a fixed height and style the inside parts to look good.

[tapz]

@qwadrox If fixed it like this:

panelStyle={isMobile ? { height: '21.5rem' } : {}}