Actually, I'm developing a MVC application with Kendo controls. I'had realice a Web template with kendo controls and show correclty.
For the web, Kendo controls display correctly, so I decided to do it for mobile.
The result was good, it worked DEMO following the example of the Kendo Telerik TabStrip.
https://dl.dropboxusercontent.com/u/3877624/Kendo/mobile_example.gif
Agree, no problem. (I thought) I'll do the same for tablets ...
I copied with the same contents of the view into a new view for tablets, and the same content of the layout for the tablet. Ultimately, it has been copied and pasted, but identifying one for tablet and one for mobile.
When I run the application on a tablet emulator, open the template and the content of the tablets correctly, but is not the same design as seen on mobile and do not know what exactly is going on.
https://dl.dropboxusercontent.com/u/3877624/Kendo/tablet_example-%5B1280x768%5D.jpg
On the tablet, the background is always black, the colors are not displayed correctly, etc. I don't know if the probler are from Opera emulator or other cause, because the files are the same.
Can anyone help?
The 1st screenshot is of Kendo UI Mobile in iOS styling, and the second is in Android styling. For whatever reason, Kendo is detecting iOS in one case and Android in another, and tries to re-style itself to fit the native look of the OS.
You can see the differences here: http://demos.kendoui.com/mobile/overview/index.html#/ by choosing different OSes on the top right "OS Simulator Mode"
You can force Kendo UI Mobile to always use the iOS look by adding this when you initialize the application:
new kendo.mobile.Application($(document.body), {
platform: "ios"
});
Related
I have had the following unexpected behavior in Kendo UI MVC MaskedEdit control:
When I used with the respective mask works well in all browsers, but if control displays it in CHROME MOBILE with predictive text keyboard control activated behaves differently.
When typing, the cursor is always positioned at the first position character. This results in a text written from right to left. Is this the correct behavior? How I can correct this behavior for writing usual on a mobile browser? This happens to me both in the pages that have developed as well on DEMO page of TELERIK.
I tried it with Samsung Galaxy S3, S4 and S5 with the same result.
http://demos.telerik.com/kendo-ui/maskedtextbox/index
Thank you
Response from TELERIK..
This is a known issue, which is already logged in our product backlog.
Unfortunately, we do not have any particular solution for this
specific problem in the aforementioned Samsumg devices. We have
scheduled the issue for further investigation and our goal is to solve
the problem for the next official release of Kendo UI.
I am using worklight 6.2 Consumer Edition on WAS Liberty Profile 8.5.5.1 Server. I am using jQuery Mobile 1.4.2 to develop UI. When I install app on iPhone/iPad, status bar of phone is hiding some part of my app's header.
How can I fix this issue (if its an issue)?
This works fine in a default new app with jQuery Mobile that was generated by Worklight Studio. As you can see, the status does not overlap the text.
You can also take a look at the Worklight Starter with jQuery Mobile edition, that also works on iOS w/out the status bar covering the top of app. Compare your CSS.
You need to provide a screen shot of what you're seeing, as well as provide a sample application where you are experiencing it. This issue originates from your code. Provide code.
One possible solution would be to add some margin-top to whichever element is at the top of your applicaiton's HTML.
I'm building a stand-alone application.
The problem is that when I deploy on my webserver, then test it on a desktop browser, everything's fine, not on my mobile device (IPad): the colors are different (yeah, I'm stuck because of colors -.-).
I tried with different browsers - same results.
I use the mobile.ios.css file for my app. So, per example, with the ios stylesheet you got the default blue gradient navbar with the white text for the title (ok on desktop browser). On my Ipad it renders a gray/white gradient instead of the blue and the title is a deeper gray with some shadow. It seems to be the default style of the navbar, but why is it working on a desktop then?
I used the theme builder offered on the kendo ui website to fix it up, but it failed.
I think this issue belongs to the javascript behind kendo framework.
Anybody got an idea or went through some similar difficulties?
Kendo UI Mobile shows slightly different styling on iPhone and iPad, to better blend in as a native-like application. There are also differences between iOS versions (e.g. the Switch is different between 4 and 5 and the TabStrip between 5 and 6).
If you prefer the same styling everywhere, you can force the platform in your application - check the docs for how to do it.
I am using JQueryMobile to build an application that will mainly run on a Linux-based touch device with Firefox.
My issue is that, with JQM, when page contents cannot fit on the screen, the web browser displays a vertical scrollbar displays a vertical scrollbar
There is no such issue with Sencha and Dojo. They both behave like if they were running on a touch-based device, even with desktop web browser (reduce the height of your browser window) :
Sencha scrolling list
Dojo scrolling list
So, how can I make JQM to be touch-friendly when running on a desktop web browser ?
It seems that there is no really good JS and/or CSS solution for this issue.
Hiding the scrollbars with CSS (overflow-y: hidden;) prevents scrolling and mess JQM touch events.
I found a workaround by using a Firefox plugin (Grab and Drag), which is an acceptable solution since I control the device that runs the browser.
It works fine, but it is not a pure JS/HTML/CSS solution...
i'm developing a simple three tabs app for Android and iPhone, using IBM Worklight as framework. Every tab links to a div with data-role="page", as jQuery Mobile specifications.
If I implement the jquery fixed persistent tabbar like is explained there (http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html), i'm encountering some flickering on the tab item in page transition (with any transiction effect).
If I set the default transition to "none", I could resolve this problem, but I lost the transiction native-like effect.
This behavior appears only if i test the App with a real android device (Xperia Neo, GS2).
If i navigate trough the pages of http://jquerymobile.com/demos/1.2.0/ with my smartphone, especially here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-d.html i can't see the strange behavior, but the footer won't be persistent trough the pages, it just re-render like the whole content and this is worse (this happen with the stock browser or Dolphin, instead looks very well by using Chrome).
Is there a way to improve this effect or there is another way to implement fixed persistent tab bar?
I used as reference the default Android Contacts App.
Maybe you're getting this flicker because you're navigating between pages using rel="external". Try to pass from one page to the other without ajax and you'll see that flickering will dissapear
The problem is due to poor performance of the WebView of the Android environment in rendering 3d transition.
Solved by removing the transition effect with:
$.mobile.defaultPageTransition = "none";
Something else that could help is putting these attributes in the AndroidManifest.xml:
<supports-screens
android:anyDensity="true"
android:largeScreens="false"
android:normalScreens="true"
android:smallScreens="false"
android:xlargeScreens="false" />
<application
android:debuggable="false"
android:hardwareAccelerated="true"/>