Header (and all fixed elements) only stays fixed on mobile

[metnew]

Header (and all fixed elements) only stays fixed on mobile

[billymcintosh]

This is the culprit in semantic-ui-css module node_modules/semantic-ui-css/semantic.css starting around line:34342

/* Left Visible */

.ui.visible.thin.left.sidebar ~ .fixed,
.ui.visible.thin.left.sidebar ~ .pusher {
  -webkit-transform: translate3d(150px, 0, 0);
  transform: translate3d(150px, 0, 0);
}

pusher and fixed classes don't like the translate3d because of the co-ordinate shift it causes.

I'll look into a fix.

[Metnew]

Hi @TheDolo, hm, I didn't consider it like an issue, but you're right this needs some research for users that are interested in fixed Header. I think it's an "enhancement", not a "bug". Will try to figure out what's the problem.

Currently, fixed elements on desktop will not stay fixed and will scroll.

It's definitely a problem if the only fixed element allowed on the page is the sidebar!

Edit: if the page is too small for a scroll (no overflow), fixed elements work fine. So I'll insert a react custom scroll bar into a max height page for . now

[Metnew]

Oh, I just misunderstood your sentence, ok, I'll investigate this case with fixed elements on the page (desktop), haven't seen this problem before.

[Metnew]

@TheDolo you can use <Rail> and <Portal> components if you need to render something outside the main container. Probably, it can be used as a temporary fix until the better solution. Also, maybe in your case Portal/Rail is the best solution.

[billymcintosh]

Sorry, people. Not quite had the time yet. I suppose this is just a starter, really. As Metnew said - it'll work outside the main container but some styling tweaks with margins and padding will be required.

[Metnew]

Page structure was improved + react-headroom was added. Now anything can be fixed/statis/relative/etc. Anything supported.

[kodemi]

@Metnew it still doesn't work. Header (react-headroom) scrolls on desktop.

[Metnew]

Hm, ok, I'll take a look asap

[Metnew]

Not sure, but the possible root of the problem:

• missing overflow-x in <PageLayout> component
• transform:0(in SUI's .pushable) breaks something.

I had a project where this feature works as expected. I'll take a look more detailed later