Flexbox support in Kendo UI Mobile.

[Gurumurthy]

Hi - I am writing to find out more about the CSS FlexBox support offered by Kendo UI Mobile.  As you know, Flexbox has undergone many changes in the last few years and I am wondering if you could provide some examples of flex layouts in Kendo UI Mobile currently.

Please take a look at the attached screenshot of an app we wrote using Kendo UI Mobile recently. This "dashboard" page uses a html <table> layout with two rows. The first column of the first row and the second row use scroll views. For obvious reasons, the use of a html table is not ideal as it takes away a lot of flexibility. We also had to hard code the dimensions of the table when the device orientation changed. 

We would like to re-write this page using flexbox layout (specifying the div pane dimensions in %), so that the various panes are able to resize and "flex" when the device orientation changes. Could you give me some pointers/example code that I can use to accomplish this?

[Dimo]

Hi Gurumurthy,

Kendo UI Mobile itself uses flexbox for practically all its layouts. I guess the SplitView is what you need in your case:

http://demos.kendoui.com/mobile/splitview/appearance.html

In case you need to make some further customizations and add more flex styles to your custom content, I recommend learning more from

http://weblog.bocoup.com/dive-into-flexbox/

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

Regards,
Dimo
the Telerik team

[Robert]

What version/syntax of flexbox are you (Kendo UI Mobile) using?  The old (2009) syntax, transitional syntax, or new (2012-ish) syntax?

If you are using older syntax, how will Kendo UI Mobile handle the transition as newer mobile browsers start to switch to the new syntax?

Thanks.

[Dimo]

Hi Robert,

We are using a combination of most up-to-date standard-compliant properties (e.g. display:flex) together with browser-specific prefixed properties (e.g. display:-moz-box) in order to ensure maximum cross-browser compatibility.

Feel free to open the Kendo UI mobile stylesheets and see what's inside.

Regards,
Dimo
the Telerik team

[Gurumurthy]

Hello - I just took of of your examples (http://docs.kendoui.com/getting-started/mobile/splitview) and loaded it into a phonegap project with cordova 2.2.0 and ran it on iPad running iOS6. As in your example, I used this style:

<style>
    #side-pane { width: 300px; }
    #main-pane { -webkit-box-flex: 1000; }
</style>

When I start the application in portrait mode, I observe that the side-pane has the width of 300px and main-pane takes up the rest of the width, as per the flex style. However, when I change from portrait to landscape, the side-pane remains at 300px (as expected) but the main-pane does not take up the rest of the real estate. I have attached both screenshots. Is this expected behavior? Shouldn't the main-pane resize to take all the remaining space?

Thanks,

[Gurumurthy]

It turns out that the above issue was being caused by the metatag (height=device-height) in the index.html's document head. After removing the metatag, the resizing works fine.

Thanks.

[Gurumurthy]

Hello -
I would like to go back to the original question in this thread and reiterate our requirements. We would like to be able to build a view consisting of multiple subviews (or panes) in an iPad application as illustrated in the image (attached again). Is there a facility that is built into Kendo UI Mobile that would help us achieve this? If not, could you recommend any methods/techniques to do so?

Thanks

[Kamen Bundev]

Hello Gurumurthy,

Unfortunately your use case is not directly supported out of the box - the main problem being that the SplitView doesn't currently support nesting within itself. If you want to see such feature implemented, consider adding a feature request for that in our Kendo UI UserVoice feedback page.

That said, the SplitView classes can still be reused for creating the UI you've shown in the screenshot. Some additional CSS is also needed to remove internal rounded corners and adjust the flex amount. There is one more issue you may face - nested flex boxes expand properly, but they don't really have a height set, thus height: 100% will not work on their contents. That's why I've set the map element with height 1000px, but you may bind to the browser orientationchange event and calculate the height for it (since 1000px will most likely break its centering).

The custom layout has a big limitation - the div elements with .km-pane class are not real widgets and you won't be able to specify them as a data-target for navigation, thus you will need to refresh either the whole parent pane or handle them manually.

I'm attaching a sample page demonstrating the layout.

Greetings,
Kamen Bundev
the Telerik team