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.

Sign up for GitHub

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

Jump to bottom

blur content on header when scrolling #4728

Open
Jedidiahip opened this issue Mar 4, 2025 · 1 comment
Open

blur content on header when scrolling #4728

Jedidiahip opened this issue Mar 4, 2025 · 1 comment
Assignees
@apedroferreira
Labels
component: Toolbar The React component. enhancement This is not a bug, nor a new feature priority: low To delay as much as possible scope: toolpad-core Abbreviated to "core"

Comments

@Jedidiahip
Copy link

Jedidiahip commented Mar 4, 2025 •
edited by github-actions bot
Loading

Summary

How to achieve header backdrop-filter blur on the content only like MUI docs

Examples

Image

currently the best I can do is to add a padding to the content and turn header to transparent and filter it. But this will make the scroll bar also be filtered.

Motivation

Making the header transparent the app feels more spacious and modern.

Search keywords: scroll
@Jedidiahip Jedidiahip added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 4, 2025
@zannager zannager added the component: Toolbar The React component. label Mar 4, 2025
@Janpot Janpot assigned apedroferreira and unassigned Janpot Mar 4, 2025
@apedroferreira
Copy link
Member

Hi, does it work if you use the sx prop in the DashboardLayout and try to target the CSS classes for the MUI header?

If it's not that simple I can take a look and how to do that eventually, maybe we're missing the customization options that are necessary.

@prakhargupta1 prakhargupta1 added scope: toolpad-core Abbreviated to "core" and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 6, 2025
@Janpot Janpot added priority: low To delay as much as possible enhancement This is not a bug, nor a new feature labels Mar 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@apedroferreira apedroferreira

Labels
component: Toolbar The React component. enhancement This is not a bug, nor a new feature priority: low To delay as much as possible scope: toolpad-core Abbreviated to "core"
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Janpot @apedroferreira @Jedidiahip @prakhargupta1 @zannager