I am currently using Kendo mobile UI in conjunction with jQuery to create a hybrid app.
In my app, I am working on a list of relations along with a searchbox placed at the top of the list. However, while scrolling through the list, the searchbox also scrolls down with the content, but I want it to remain fixed at the top.
Here's how my view is structured:
<div data-role="view" data-title="Relations" data-layout="main" data-model="app.relations" data-show="app.relations.onShow" data-after-show="app.relations.afterShow">
<div class="search-box">
<input type="text" class="search-input" id="searchRelations" placeholder="Search...">
</div>
<ul id="relations" class="data-list"></ul>
This is the CSS used for styling:
.search-box {
position: fixed;
top: 0px;
}
Is there any solution or idea on how to resolve this issue?