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.
Related
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.
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"
});
I've build a test app with phonegap build using only the jquery mobile example file.
In the browser the style is white (see the link: http://view.jquerymobile.com/1.3.2/dist/demos/examples/ ) but in the app i see the header and the buttons in the black version.
Anyone have some idea to solve this?
Tnx
Did you try changing the data-theme='a'. The data-theme controls what the buttons and background look like and Jquery mobile has created a standard set of swatches. http://jquerymobile.com/demos/1.1.1/docs/api/themes.html - check this out for more information on changeing the colors or themeing.
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"/>
I'm implementing sirf in a site using a Drupal module. I have a few issues...
During testing the text fails in Safari 4 beta (win) and renders with a green background when transparency is applied. No doubt a Safari or plug in issue. There are a few crap things happening, the Lightbox overlay fails to cover any Flash objects. I'm sure you guys are tracking that error.
Exported fonts using Flash CS4 don't work. Got no idea why, I reverted to using one of the online conversion sites. I think the FLA is CS3. Maybe this could be updated.
Transparency failing in Safari 4 / Windows in definitely a Safari bug.
Which sIFR version are you using? The sIFR 2 movie is available in a CS 3 format, I do think the sIFR 3 movie is Flash 8.
sIRF3 and not working with Flash CS4 (for editing)
I've got some issues with headings not being drawn on the initial page load. Like the heading aren't draw in html before sIRF starts up and nothing then appears.
And another where jQuery created drop shadows draw before the sIRF text then when the page shifts they are in the wrong location.
I've mutated the call to this...
$('document').ready(function(){
$('.image-thumbnail img').ready(function(){
setTimeout( "drawShadow();", 4000) //slow it down to give objects a chance to draw
});
});
function drawShadow(){
$('.image-thumbnail').dropShadow({left:2, top:2, blur:2, opacity:0.5}); // Creates new drop shadows
}
What I really need is a signal that sIRF has completed. Any clue how I might do that?