Closed rubydesign closed 4 years ago
Hi @rubydesign,
please provide a codepen with the code so we can reproduce and check this in detail.
Ok, i forked the fixed example. https://codepen.io/rubydesign/pen/abzLjBM The "more content" i added "pushes" the child out of view. And as i said, the positioning changes to absolute when that happens. Is that intentional?
I can't really see that the position: absolute
causes any problems, however going from not being stuck to being stuck makes the element become fixed
which causes it to not take up any space, making the "child 2" get hidden beneath "child 1". Is this the problem you are referring to @rubydesign?
@mbark My problem is that the element becomes unstuck by "more content" pushing it up. This may be just me ( @DanielRuf, is it?, you didn't answer that), but for me this makes it unusable.
And as i said, i don't see why the docs don't talk about what is going on with the "absolute" .
Sorry, I'm working on other things in the last days. Projects at work have a higher priority at the moment.
@rubydesign I don't quite understand from the codepen what the problem is, could you post a screenshot of how it looks?
It appears that after version 3.6.8 an element with position:sticky
is given position:absolute
as inline style and thus overrules your own styling (initially). This breaks layouts, because position:absolute
takes the element out of the normal flow and affects its width.
E.g. a <div>
element is 100% width of its parent normally and with position:absolute
, it looses this width.
I think I fixed the problem in #658, if not then please tell me @Esger or @rubydesign!
Hi, while trying this out, i could not get it to work. (using 3.7.2 with foundation 6.6.1 rails 5.2) On firefox 71.0 position sticky was used. I guess "correctly", but it didn't work. So i added useFixed
Then it worked for a bit, until the second subsequent div pushed it (my menu) out of view. When looking at this i noticed that the "position: fixed, top:0" was what made it work. But then "position: absolute; bottom 0" was added and it became unstuck.
I changed the js (managestate, statestyles) to keep the "fixed, top" and all works as i would expect.
Now i am wondering what happened here. Did i misunderstand something or does my setup possibly mess with stickybits? The docs don't seem to mention any absolute positioning.