Flexbox support in Kendo UI Mobile.

8 posts, 0 answers
  1. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 21 Dec 2012 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 25 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 26 Dec 2012 Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 27 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    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,
  6. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    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.
  7. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    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?

    After going through the documentation, it doesn't look like a Splitview would be a possible solution for several reasons.  As shown in the image, we want a navbar and tabstrip at the application level, something that a splitview-approach cannot provide. The image also shows panes that are nested within the main view - this too rules out splitview as a solution since a splitview cannot be nested in another view.

    What options do we have in this regard? Have any others in this forum had the same issue that you are aware of, and if so, how did they approach it?

    Thanks

  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top