Kendo mobile UI fixed position

0
votes

I'm using Kendo mobile UI with jquery to build an hybrid app.

I'm building a list of relations with a searchbox in top of the list. While scrolling te list the searchbox also scrolls down with the list but I want it to stay on top.

My view looks like this

<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>

CSS looks like this

.search-box {
 position: fixed;
 top: 0px;
}

Any idea how to fix it?

1
jquerycsskendo-uikendo-mobile

1 Answers

1
votes

You have top use 

.search-box {
 position: absolue;
 top: 0px;
}

to get it work like you want it to.

position fixed makes the element fixed on the screen not on the page. So if you scroll, it stays allways at the same position.