Sticky element width doesn't update, use max-width instead
nedkelly opened this issue · 2 comments
When the sticky
element sticks the current width is applied to the style
attribute. When resizing the window this size cannot update because it will always be equal to the initial size: initialCSS.width=width
is the same as 263=263
because you've explicitly declared the width - then retrieved the width.
To fix this use width: 100%; max-width: XXpx;
instead, this way the element can properly resize.
element.style {
z-index: 10;
width: 100%;
max-width: 233px;
position: fixed;
top: 10px;
margin-top: 0px;
}
Cheers.
Above didn't work for me; but below did. I set the style.width on element to 100%
<div sticky style="width:100%"></div>
Then I replaced the
$elem[0].offsetWidth
to
($elem[0].style && $elem[0].style.width) || $elem[0].offsetWidth
I can create a pull request if this works for other people.
We had the opposite problem. A sticky div with max-width set. ng-Sticky modified the css with the calculated width, if the window resized while in "sticked mode", then going back to non-sticky did not update the correct component width.
@axar 's patch seems to solve it.