Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: footer-value overlaps on drawer-side #3614

Closed
fel1x-developer opened this issue Mar 7, 2025 · 2 comments
Closed

bug: footer-value overlaps on drawer-side #3614

fel1x-developer opened this issue Mar 7, 2025 · 2 comments

Comments

@fel1x-developer
Copy link

fel1x-developer commented Mar 7, 2025

Reproduction URL (Required)

https://github.com/fel1x-developer/poudriere-web-app/tree/main at 15d68bcc93b8f27f5c59b9feb97408d4c97c049a

What version of daisyUI are you using?

v5.0.0

Which browsers are you seeing the problem on?

All browsers

Describe your issue

In src/routes/+layout.svelte, change

<div class="drawer-side z-10">

to

<div class="drawer-side">

and try to make window narrow under lg.

Then the footer-title overlaps on the drawer, which SHOULD NOT happen.

The temporary fix I'm using right now is giving z-1 or above as the first code snippet.

Copy link

github-actions bot commented Mar 7, 2025

Thank you @fel1x-developer for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@saadeghi
Copy link
Owner

saadeghi commented Mar 8, 2025

Put footer inside the drawer-content
Everything must be int drawer-content

Docs:
https://daisyui.com/components/drawer/#structure

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page, based on the screen size or based on the value of a drawer-toggle checkbox.
Drawer must be the parent element of the content and sidebar.

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ╰── // navbar, content, footer 👈👈👈👈👈👈
  │
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       ╰── // Sidebar content (menu or anything)

@saadeghi saadeghi closed this as completed Mar 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants