search

Learus / react-material-ui-carousel

A Generic carousel UI component for React using Material UI.
MIT License
550 stars 219 forks source link

custom button added to the corner of the card is not clickable because hidden div with the right arrow #219

Closed cesarpachon closed 1 year ago

cesarpachon commented 1 year ago

hello, I am trying to add a small "x" button on the top-right corner of my cards in order to allow users to dismiss the announcements that they don't want to see. something like: -carrousel -- Card //the announcement container --- Button //the button in the corner

The problem is that a transparent div appears in the right side as soon as you move the mouse there, making impossible to click the button. I tried with z-index with no success (hidden div has z-index=1 and MUI buttons have z-index=1500 but that doesn't seems to have any effect.

In this screenshot I deformed the button so a side of it lies outside the invisible div, in that part the click works:

image

I appreciate any suggestion about how to implement this feature.

Learus commented 1 year ago

Hi. Try using thee fullHeightHover boolean prop. That's exactly the use case for it.

cesarpachon commented 1 year ago

Thanks @Learus it worked!