2

My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.

My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.

I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.

for instance:

.km-ios #tabstrip-scan .km-navbar
{
    background-image:none;
}

should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:

.km-ios #tabstrip-scan .km-navbar
{
    background-image:none;  // works
    background-color: #d9d1ba; //doesn't work
    color: #333333;  //doesn't work either
}

I have the same problems with their button classes:

.km-ios .km-button 
{
    height: 32px; // works
    width: 100% // doesn't work;
    background-image: none; // doesn't work
}

and with inputs:

.km-ios input[type=text]
{
    width:100% // doesn't work
    border-radius: 3px; // doesn't work
    -webkit-border-radius: 3px // also doesn't work;
}

At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.

How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?

Petur Subev
  • 19,983
  • 3
  • 52
  • 68
Eddie Prislac
  • 145
  • 1
  • 10

2 Answers2

3

Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:

http://demos.kendoui.com/mobilethemebuilder/index.html

Bundyo
  • 2,195
  • 13
  • 13
  • I get why we'd force the one application platform, but is there no way to do it in straight css? Theme-builder will not let you edit border-radius, and seems pretty limited as far as the level of customization is concerned – Eddie Prislac Mar 26 '13 at 21:44
  • Every platform on Kendo UI Mobile consists of common css, icons and platform-specific CSS. If you have a commercial license, you will get the LESS parts and can mix them as you wish, though you will need [our fork of LESS](https://github.com/telerik/less.js/) to compile them. Since you use Icenium, I guess you don't have a commercial license, then you can get the post-Q1 common and icons CSS [from here](http://bundyo.org/common/kendo.mobile.common.min.css). You will still need the images folder to use it. – Bundyo Mar 27 '13 at 06:27
  • Thanks for the link. I appreciate your attempts to help. After further digging, it seems that the Icenium simulator is straight-up not applying the styles that I've written- after viewing them in the debugger, a lot of what I've written doesn't appear to be showing up. (This would explain why I was still getting the default kendo styles after commenting out the default stylesheet). Is this a known bug in Icenium? – Eddie Prislac Mar 27 '13 at 14:28
1

You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.

Community
  • 1
  • 1
DropHit
  • 1,695
  • 15
  • 28