search

woofers / react-sheet-slide

🏞️ 🎢 🛝 A responsive React draggable sheet and dialog component
https://jaxs.onl/react-sheet-slide/
35 stars 5 forks source link

Hide Footer? #15

Closed rsimon closed 3 weeks ago

rsimon commented 3 weeks ago

I want to hide the footer from the sheet.

Even though my <Sheet> component doesn't have a <Footer> child, the rendered sheet still renders an empty footer <div>. See the gray bar in the image below:

Bildschirmfoto 2024-08-21 um 14 23 03

My workaround is to add a Footer element with a custom CSS className, and then add .footer { display: none } to my stylesheet. Obviously, it's not a serious issue, because it's easy to work around. But I just thought I'd report it.

woofers commented 3 weeks ago

Hi @rsimon, react-sheet-slide strongly encourages the use of a footer to prevent any CTA buttons from overflowing on mobile. Having said that if you want to hide the footer I would recommend just keeping in the React component structure but doing something like <Footer className="hide-footer" /> .

Then you can effectively hide it and set it to have 0 height:

.hide-footer {
  background: none;
  padding: 0;
  box-shadow: unset;
}

display: none may also work but I'm not sure if this would affect any of the drag/touch logic.

rsimon commented 3 weeks ago

Thanks for the quick reply. That works for me!