Support #12112
openScroll visibility not working as expected
0%
Description
Hello,
I have some "infinite loading" containers and they actually work well when put inside a WStackedWidget.
However, this is not the case when writing custom bootstrap5 html like this:
<message id="Lms.Explore.Search.template">
<ul class="nav nav-pills mb-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="releases-tab" data-bs-toggle="tab" data-bs-target="#releases" type="button" role="tab" aria-controls="releases" aria-selected="true">${tr:Lms.Explore.releases}</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="artists-tab" data-bs-toggle="tab" data-bs-target="#artists" type="button" role="tab" aria-controls="artists" aria-selected="false">${tr:Lms.Explore.artists}</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tracks-tab" data-bs-toggle="tab" data-bs-target="#tracks" type="button" role="tab" aria-controls="tracks" aria-selected="false">${tr:Lms.Explore.tracks}</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane show active" id="releases" role="tabpanel" aria-labelledby="releases-tab">${releases}</div>
<div class="tab-pane" id="artists" role="tabpanel" aria-labelledby="artists-tab">
<div class="row mb-3">
<div class="col-lg-3">
${link-type class="form-select"}
</div>
</div>
${artists}
</div>
<div class="tab-pane" id="tracks" role="tabpanel" aria-labelledby="tracks-tab">${tracks}</div>
</div>
</message>
"artists", "releases" and "tracks" are all widget containers that has a sentinel set with scroll visibility enabled.
Each time the signal is fired with visibility = true, I add elements, and I recreate a sentinel (using bindWidget) with scroll visibility enabled.
Only the sentinel that is actually on the current tab is working, the other two are always being fired with visibility = true, which in case is infinite.
Do you have an idea on what may be wrong?
Updated by Matthias Van Ceulebroeck 12 months ago
- Tracker changed from Bug to Support
Hello Emeric, apologies for the late reply.
I have not tried to reproduce this yet, but I have a suspicion. My guess is that Bootstrap 5 does not set the visibility style to hidden, or display to none in the way that Wt expects. Or if it does so, that it may do so with a delay due to animation?
As I said, that's currently just speculation. Either you can see how the ScrollVisibility.js file behaves, as in place a couple debug markers or console.logs.
If you want you can provide a minimal example that exhibits this behavior, and I can look into it for you.