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

DropDownList in Mobile styled like desktop

8 Answers 542 Views

General Discussions

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

Kevin Kembel asked on 06 Dec 2013, 06:34 PM

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"

8 Answers, 1 is accepted

answered on 09 Dec 2013, 04:57 PM

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

answered on 09 Dec 2013, 07:17 PM

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?

answered on 11 Dec 2013, 09:02 AM

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!

answered on 11 Dec 2013, 10:13 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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 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>

<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.

Accepted

answered on 13 Dec 2013, 09:32 AM

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

DropDownList in Mobile styled like desktop

8 Answers, 1 is accepted