Fixing an element with css fixed sticks the element in place in the Hype editor window

1

No css added.

52
Screen Shot 2018-06-09 at 21.20.52.jpg1782×1096 57.1 KB

But If you add position:fixed for an element and for instance you have elements off scene.
You may get one or more scroll bars for the Hype Element editor pane.

So as you scroll the fixed element stays stuck in place ( or so it seems… read on… ) but other unfixed elements including the scene view move with the scroll.

23
Screen Shot 2018-06-09 at 21.22.23.jpg1764×1068 52.9 KB

Both above images show unfixed and fixed in the editor after scrolling right…>

Other css also affect things.

For example putting a left: 100px!important; on the same element.

Unscrolled in window and with both fixed and position css.

11
Screen Shot 2018-06-09 at 21.46.11.jpg1768×1062 50.7 KB

Now scrolled to right in window.

56
Screen Shot 2018-06-09 at 21.45.56.jpg1766×1050 43 KB

Same in preview. ??.

The inner no where to be seen…

46
Screen Shot 2018-06-09 at 21.51.46.jpg2228×1314 394 KB

It seems the outer div container is being fixed in the original position but the inners show in a completly incorrect position . Or in this case probably off scene…

example.hype.zip (10.7 KB)

2

It is fixed, but still within the overflow boundaries of the scene. If you make the window smaller you’ll find it will start to show. Positioning with fixed means that the 100px is relative to the window, not Hype’s scene anymore.

The current state is that if you add CSS that interferes with Hype’s layout, it won’t work correctly in Hype’s editor.

3

Thanks.

I did not realise that positioning with fixed did this ( should have I guess)

I knew some css can clash with viewing in Hype but in the real doc I am working on it is really bad.

I guess I can work around it from the Hype viewing by either putting the css in an external doc but not linking to it straight away.

Or just run something like

document.querySelector('.navBar').classList.add('navBar_') and then the css will have a declaration for .navBar_

Unless you have a better solution ??.

It’s a shame we do not have a toggle to enable/disable for linked css when in Hype viewer. ( not export or preview )

4

I don’t really have a better solution at this time, but it is a really common problem that I’d like to solve. I might introduce some sort of macro that can show/hide code based on if it is the editor environment or not.

2 Likes