question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

(sidenav) elements with `position: fixed` inside `md-sidenav-layout`

See original GitHub issue

Because 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.

cc @hansl @jelbourn

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:32
  • Comments:49 (11 by maintainers)

github_iconTop GitHub Comments

20reactions
cortopycommented, Nov 4, 2016

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

18reactions
sterlingfscommented, Dec 4, 2016

pretty please remove transform: translate3d from the .md-sidenav-content class?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found