KendoMobileButton equally distributed height and fill screen

5 posts, 1 answers
  1. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 14 Jun 2013 Link to this post

    I'd like for five buttons to fill the entire screen of my apps first view, like in the attached sketch.

    Using the css vh tag works great on iOs 6.x, but not in Safari on iOs 5.x. 

    Tried setting height of body and html to 100%, and then the button height to 20%, but this doesn't work inside the view.

    Any suggestions?
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 Jun 2013 Link to this post

    Hi Robin,

    You may consider using the flexbox CSS approach - Kendo UI Mobile uses it for its header/footer/content layout. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 20 Jun 2013 Link to this post

    Thank you for your great tip regarding the use of Flexbox.

    I think I'm approaching a suitable solution, but I'm having trouble having the flexbox container fill the view 100% in the height.

    http://jsfiddle.net/pjJvn/6/

    Also the four button-divs should again be all filled up by the Kendo UI Mobile button.
  4. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 24 Jun 2013 Link to this post

    Hello Robin,

    You will have to use the stretch configuration option of the view to achieve that. Please check the updated jsfiddle

    Stretching the buttons themselves is quite tricky, though. If you don't need the button styling (which is probably not that great for such interface), you may use the kendo touch widget on the div elements themselves, and bind to its tap event. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 24 Jun 2013 Link to this post

    Great! Thanks again for, as always, fabulous service!
Back to Top