Sticky is not working after UI update
Hi,
I'm using your Sticky class for use sticky on my elements.
when the page is loading everything is works ok, but I'm doing some UI update in some time, and the sticky stop working.
I've done the "KTSticky.createInstances();" call, and when I'm scrolling I see the element definitions changing, but the UI looks like the same
Replies (3)
Hi,
Please try to call KTComponents.init() if you dynamically change the page contents.
If you are updating the page width or other parts you should try to use
var stickyElement = document.querySelector("#kt_sticky_control");
stickyElement.update();If you are having other issues please check this related post.
If you need any further help please let us know your Metronic version and explain the issue in more detail.
Regards.
Hi,
Is it working in the original template? What have you changed ?
Could you please provide us with your test URL so we can check it your online?
Regards.
The feature is not uplaoded so its not something online yet.
I try to explain it more clearly:
I have a card with header:
<div class="card-header bg-white py-3" data-kt-sticky="true" data-kt-sticky-width="{target: "#widgetTarget"}" data-kt-sticky-name="a2" data-kt-sticky-top="70px" data-kt-sticky-offset="{default: false, xl: "1450px"}" data-kt-sticky-release="#events" data-kt-sticky-zindex="10" data-kt-sticky-reverse="true">
<h3 class="fs-3 fs-3 d-flex align-items-center mb-0">Header text
</div>when the page is loading, the sticky works perfect, starts and leave just on time.
I have a case in my js code, that i'm re-render the widget so the header html is re-render again.
when this case is happen, the sticky stops working.
as it happened in other cases, I had to init the instances.
but in KTSticky the "KTSticky.createInstances()" method is not recreating the instance of the sticky, so it keeps not working.
in regular case, the header has some styling that added to the header so this is what makes it "Sticky", but after the render, when I do "createInstances" this styling is not added automatically to the header.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
