idiomorph
idiomorph copied to clipboard
Preserving overflowing containers' scroll positions
I have a standard listing of audio recordings with different filters on the left which are grouped in overflowing containers; say something like this:
<div id="core">
<aside>
<form id="author" hx-post="...." hx-swap="morph:outerHTML" hx-target="#core" style="overflow: auto; max-height: 100px">
<input type="checkbox" value="..." id="input-author1" /> author 1
<input type="checkbox" value="..." id="input-author2" /> author 2
etc...
</div>
<form id="years" hx-post="....">
</form>
</aside>
<main>/* contents */</main>
</div>
Each time a checkbox is changed my backend performs a search and returns the whole #core container. This is because the filters are reactive, and indeed if you filter by a particular author, this might disable certain yeras, and vice versa (and it gets more complex with more filter categories, of course.)
I was expecting idiomorph to preserve the form's scroll position, but it doesn't. Any idea?
Thank you very much!