DropDownList in Mobile styled like desktop

9 posts, 1 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 06 Dec 2013 Link to this post

    I can't figure out where I'm going wrong with this one.  I even copied and pasted the demo from: 
    http://demos.kendoui.com/mobile/forms/index.html 
    and put it into my view.

    Any time I use a kendo DropDownList in my mobile app, it works and all, but it's styled like a regular desktop dropdownlist.  I need a mobile-styled dropdownlist, like in the demo.  ... I need it to cover the bottom half of the screen, big buttons like mobile, attached to the screen itself rather than in a dropdown below the form element.

    I'm using Q3 2013, and I assume it's stylesheet related rather than JS? When I initialize my app, I force "platform: 'ios'", not sure if that's related somehow?

    These are my included stylesheets, in this order:
    <link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
    <link href="kendo/styles/kendo.flat.min.css" rel="stylesheet">
    <link href="kendo/styles/kendo.mobile.common.min.css" rel="stylesheet">
    <link href="kendo/styles/kendo.mobile.ios.min.css" rel="stylesheet">
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 09 Dec 2013 Link to this post

    Hi Kevin,

    You are missing the kendo.mobile.all.min.css file in your project which is causing the issue that you mentioned. I would also like to ask you why do you force the ios platform when you also include the flat skin in your project? Please keep in mind that forcing the platform changes the way the application looks and does not make any changes in the way it works on the device. 

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 09 Dec 2013 Link to this post

    Hi Kiril,

    No dice, I tried including kendo.mobile.all.min.css instead of kendo.mobile.ios.min.css, but I get exact the same result.

    I tried using the exact same CSS files as the demo:
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    Which I'd rather not do anyways just because of the size of the files (since I'm forcing platform:ios).  Is the only difference in the CSS?  There's no JS for mobile that changes the behavior of the Kendo Web DropDownList?

    To speak to your other question, the reason that I included kendo.common.min.css and kendo.flat.min.css, even though I'm forcing ios, was because my understanding is that those are the Kendo Web CSS files that I need for the standard DropDownList base styles.  If I don't include them, the dropdownlist looks messed up for sure.

    Although I'd love to get rid of those, it seems like overkill to have to include 150KB of CSS to style the dropdownlist.

    Kevin
  4. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 09 Dec 2013 Link to this post

    I think I figured out why this problem is rare.  It seems to be because I have a universal app, like in this article:
    http://docs.kendoui.com/howto/universal-mobile-apps-html5 

    I have:
    <body>
      <div id="phoneApp" style="display:none;">
      </div>
      <div id="tabletApp" style="display:none;">
      </div>
    </body>
    And I will $("#phoneApp").show() and: new kendo.mobile.application($("#phoneApp"))
    depending on whether the device is a tablet or a phone.

    Since the app is not initialized as "new kendo.mobile.application(document.body)" then the mobile dropdownlist is broken.  If I shift everything around so that my app is the document body, then the mobile dropdownlist is displayed correctly.

    Problem is that I want a universal app, and don't want to to have to rearrange it all to get the mobile dropdownlist working :-)  I'm hoping this is an oversight, that it assumes the app is the body and not a child?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 11 Dec 2013 Link to this post

    Hello Kevin,

    I will try to answer all of your questions, but I miss something please accept my apologies. 

    Forcing the platform affect only the CSS and how your application is displayed on the device. If you do not force a platform platform specific styling is applied, so it will look "native like" on the different devices.

    When the dropdownlist is used in a mobile application its behavior is changed to meet the mobile standards for this type of control and give the best user experience, as it is run on a touch device. But if you initialize the application on a container that does not have the dropdownlist inside, then it will not behave in the mobile specific way.

    In your application no matter if its for phone, tablet or both you must not have more than one declaration of a new kendo.mobile.Application(), as multiple declarations will cause unexpected behavior and display issues.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 11 Dec 2013 Link to this post

    My apologies, I must have been very confusing.

    I know that forcing the platform affects how it is displayed, that's my purpose for forcing the platform.  I don't want it styled like a native app on each platform, so I force iOS as a starting point, and I've added my own customizations to the iOS stylesheets so that my app is branded consistently across all platforms.  I don't want this side-point to distract from the issue, since forcing the iOS platform is working exactly how I want it to.

    I'm also not initializing more than one application, I was referring to initializing your app in either one or the other container (a conditional app container to support a universal phone/tablet app layout). Like the following post:
    http://docs.kendoui.com/howto/universal-mobile-apps-html5 

    I definitely only have one kendo.mobile.Application() declaration.  So I think just to make it absolutely clear, I've illustrated the bug in two HTML files.

    This first file is a basic mobile dropdownlist for a single phone-only app.  This is super basic, and it works exactly as you'd expect, the dropdownlist is styled as a mobile dropdownlist without any issues:
    <!DOCTYPE html>
    <head>
        <title>Drop Test</title>
        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
     
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="main" data-role="view" data-show="showTest">
            <label>Drop Down Test:
                <select id="dropdowntest">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </label>
        </div>
        <script>
            new kendo.mobile.Application(document.body);
     
            function showTest(e) {
                $('#dropdowntest').kendoDropDownList();
            }
        </script>
    </body>
    </html>
    Now, the above code works great.  But, if you try and follow the instructions in the blog post, and create a universal app, then the mobile dropdownlist is broken.  Here's a really basic example:
    <!DOCTYPE html>
    <head>
        <title>Drop Test</title>
        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
     
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="phone" style="display:none;">
            <div id="phoneMain" data-role="view" data-show="showTestPhone">
                <h1>This is a phone app layout</h1>
                <label>Drop Down Test:
                    <select id="dropdowntest-phone">
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </div>
        </div>
        <div id="tablet" style="display:none;">
            <div id="tabletMain" data-role="view" data-show="showTestTablet">
                <h1>This is a tablet app layout</h1>
                <label>Drop Down Test:
                    <select id="dropdowntest-tablet">
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </div>
        </div>
        <script>
            // Determine the container, and initialize the app
            var isTablet = (kendo.support.mobileOS && kendo.support.mobileOS.tablet);
            var appContainer = (isTablet ? $('#tablet') : $('#phone'));
     
            new kendo.mobile.Application(appContainer, {
                init: (function () {
                    appContainer.show();
                })
            });
             
     
            // Event handlers
            function showTestPhone(e) {
                $('#dropdowntest-phone').kendoDropDownList();
            }
            function showTestTablet(e) {
                $('#dropdowntest-tablet').kendoDropDownList();
            }
        </script>
    </body>
    </html>

    Because the app is not initialized on the document.body, the mobile dropdownlist styling isn't taking any effect.  It seems to be as simple as the difference between:
    new kendo.mobile.Application(document.body)
    and
    new kendo.mobile.Application(appContainer)

    If I don't use kendo.mobile.Application(document.body), then the mobile dropdownlist is broken.  This example follows the recommendations for a universal app:
    http://docs.kendoui.com/howto/universal-mobile-apps-html5 

    i hope that's more clear.  Both of these examples use the exact same js and css resources, yet the first one styles the dropdownlist for mobile, and the second one doesn't.
  7. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 13 Dec 2013 Link to this post

    Hi Kevin,

    First of all thank you very much for the detailed explanation, it helped understand the problem.

    The problem comes from the fact that when application is initialized in a separate container and not on the document.body, the root element becomes different and the popup window of the dropdown list cannot locate it correctly and append. The fix for this behavior is to set a class ".k-group" to the new root element, so the dropdownlist will be able to correctly locate it and perform as expected.

    In other words your container should be something like this:

    <div id="app-container" class="k-group">
      //put your views here
    </div>


    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 13 Dec 2013 Link to this post

    Excellent!  That works perfectly, thank you!
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 14 Dec 2013 Link to this post

    Hello Kevin,

    I am glad that you find the provided information to be helpful.

    In case you have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top