Positioning and Layout

2 posts, 0 answers
  1. Rakesh
    Rakesh avatar
    3 posts
    Member since:
    Jul 2013

    Posted 23 Nov 2015 Link to this post

    I am new to html5 world. Need some help in layouts (css).

    I created a sample in plunker. http://plnkr.co/edit/nXxN17?p=preview

    Basically, i am looking for main body non-scrollable. All content should be with in main page and making center element scrollable(in this case listview).

     

    this is my requirement.

    body
    div - 40px;
    div - maxHeight: 100px; - header
    div(pager) - 30px;
    div(listview) - * fill height and scrollable
    div -
    div - maxHeight: 100px; - footer
    div - height - 40px; - buttons always stays on bottom

     

    Appreciate your help

    - Thanks

    Rakesh

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 25 Nov 2015 Link to this post

    Hi Rakesh,

    The described scenario requires the ListView element (div#listView) to have a height style and an overflow:auto style. The height can be calculated with Javascript, depending on the height of the browser viewport and the other elements on the page.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top