Edit this page

Create Fixed Content Areas with Scroller

The example below demonstrates how to create fixed/scrollable areas in the content part of a mobile view when working with the Hybrid UI components of Kendo UI.

Example
    <div data-role="view" data-title="Flexbox Demo" id="scroller-view" data-init="listViewInit" data-stretch="true">
      <header data-role="header">
        <div data-role="navbar">
          <span data-role="view-title"></span>
          <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
      </header>
      <footer data-role="footer">
        <div data-role="tabstrip">
          <a data-icon="home">Home</a>
        </div>
      </footer>
      <div class="container">
        <div class="search">
          <input type="search" class="k-textbox" placeholder="Search..." />
        </div>
        <div data-role="scroller" class="scroller-content">
          <ul id="flat-listview"></ul>
        </div>
        <div class="static">
          This is some static text
        </div>
      </div>
    </div>
    <script>

      var data = [ "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon", "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon" ];

      function listViewInit() {
        $("#flat-listview").kendoMobileListView({ dataSource: data });
      }
    </script>
    <style scoped>
      .container {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        display: -moz-box;
        -moz-box-orient: vertical;
      }

      #scroller-view .scroller-content {
        -webkit-box-flex:1;
        -moz-box-flex: 1;
      }
      .search {
        -webkit-box-flex: 0%; /* setting the search div to get 0% of the remaining window value  */
        -moz-box-flex:  0%;
      }
      .static{
        -webkit-box-flex: 0%; /* setting the static div to get 0% of the remaining window value  */
        -moz-box-flex:  0%;
        line-height:50px;
        vertical-align:middle;
        text-align:center;
        font-size:18px;
        background-color:#e15613;
        color:#fff;
      }
    </style>
    <script>
      var app = new kendo.mobile.Application(document.body);
    </script>

See Also

Articles and other how-to examples on the Kendo UI hybrid components:

For more runnable examples on the Kendo UI hybrid controls, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy