(sidenav) elements with `position: fixed` inside `md-sidenav-layout`
See original GitHub issueBecause of transform: translate3d(0, 0, 0)
on md-sidenav-layout
any element with position: fixed
inside it will act as if it had position: absolute
or static
instead. It’s an expected behaviour, but it’s annoying nevertheless.
Could we either remove that transform
from md-sidenav-layout
(it’s only there because of performance I suppose), or add more examples to Portal
and mention it as a workaround in docs, since portal could probably solve this by basically putting the element that needs to be fixed next to the md-sidenav-layout
in the dom tree.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:32
- Comments:49 (11 by maintainers)
Top Results From Across the Web
Can md-toolbar be fixed top when inside md-sidenav-layout?
I just tried to setup a simple website skeleton consisting of a toolbar, a sidenav and the main content area, each scrollable on...
Read more >Sticky (Fixed) SideNav Layout with CSS - DesignM.ag
Fixing the sidenav is quite simple, just add a fixed position to your sidenav, then float your main content to the right. CSS...
Read more >Building a sidenav component - web.dev
The primary layout element #sidenav-container is a grid that creates 1 row and 2 columns, 1 of each are named stack . When...
Read more >How to put main element next to sidebar? - HTML & CSS
Hey there I am trying to put main element next to the sidebar please let me know how can I do this in...
Read more >Use CSS Grid to Make a Fixed Sidebar with Scrollable Main ...
The grid element header will take up just the first row of the grid (the 55px high row), and the second column, and...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
In my opinion this is a bug insofar as it is the equivalent of putting a ban on fixed elements. I am now trying to create a fab button on the bottom right corner of the screen. Because of this issue I’m unable to do so unless I use solution provided by @fxck
pretty please remove
transform: translate3d
from the.md-sidenav-content
class?