Navigation buttons blocking dropdown month / year in calendar

[iamyahia]

Code sandbox demo: https://codesandbox.io/p/devbox/beautiful-joliot-vhtl3d?workspaceId=ws_4U3GHbmu1dNzXngJEyXnBW

Issue Description

Hey everyone,

I'm facing an issue while styling the navigation buttons for the calendar component. My goal is to:

• Position the right arrow button at the far right of the calendar.
• Position the left arrow button at the far left of the calendar.
• Place the months + years dropdown in the center between them.
  Example:
  

Problem

To achieve this, I applied absolute w-full to the nav (navigation buttons). However, this creates two issues:

• The navigation buttons become unclickable.
• Adding z-index: 10 (or z-10) fixes the button click issue, but then the dropdown menu doesn’t open.

You can see same result in the sandbox demo

Question

How can I properly position the navigation buttons while keeping them clickable and ensuring the dropdown works as expected?

Any help would be greatly appreciated! 🙏

[rodgobbi]

Hi @iamyahia

To fix it, you should apply the z-10 to the navigation button elements themselves, not the container wrapping both, doing so works:

z-index.fix.mov

[iamyahia]

You're correct and that's work as expected ✅

plus: special thanks