This is a migrated thread and some comments may be shown as answers.

KendoMobileButton equally distributed height and fill screen

4 Answers 79 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 14 Jun 2013, 09:42 AM
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?

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 18 Jun 2013, 06:44 AM
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!
0
Robin
Top achievements
Rank 1
answered on 20 Jun 2013, 09:53 PM
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.
0
Accepted
Petyo
Telerik team
answered on 24 Jun 2013, 02:58 PM
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!
0
Robin
Top achievements
Rank 1
answered on 24 Jun 2013, 03:15 PM
Great! Thanks again for, as always, fabulous service!
Tags
General Discussions
Asked by
Robin
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Robin
Top achievements
Rank 1
Share this question
or