The loader in my application looks like above with an unwanted background surrounding it. I cannot get rid of the background, same situation when I use a different transparent ajax-loading.gif. In the same browser the loader looks fine in the demo application:
I am using a theme roller theme but I did not find a setting there which seems to influence the loader plus the css for the loader looks identical in my app and the demo app.
Any clues what could cause the Looks of my loader?
I was able to work around this by setting a theme that I am not actually using:
$.mobile.loader.prototype.options.theme = "f";
My theme seems to have messed the looks of the loader maybe because I am not using rounded corners, but by adding 1em corners (as in the default theme) I could not completely get rid of the glitch.
Related
I'm facing problems with the Vaadin Designer tool using with Vaadin v23, that is included in the pro description. A custom theme was created and i have annotated the theme in the application class of the project in order to append it. Inside the browser everything looks as expected with the styling of the theme. And every change on CSS have an effect on this outcome.
But the problem is, that the CSS of the theme has no effect on the designer view and i want to make this happen.
Logically that can't work with the theme in designer, because it is applied later to the Java-class (Application-class) through the #Theme-Annotation, but how can I properly apply the theme to the designer to have the full preview inside there?
I don't know if this is something that can be helped, but when I tap and hold on a web page in mobile safari, or in cordova/phonegap-made apps run in iOS, there is this pretty useless empty "tooltip" popping up close to the top of the viewport, and it only moves horizontally across the screen.
Here is a screenshot of what I'm talking about (that annoying thing circled in red that totally gives away that this is a cordova app)
My question being : is it possible to prevent this behavior, and how ? It seems to not be present on anchor <a> anchor elements but putting anchors all over the place seems like overkill for this.
And if anyone knows, just so I go to bed a little less stupid, what is this feature called and what is it for exactly ?
I already have the following css properties in my body
-webkit-user-select: none;
and
-webkit-touch-callout: none;
to prevent the text selection and the copy and save of images.
I've downloaded other phonegap-made apps from the App Store and they too have this feature, so maybe there's no fixing it.
Anyways, thanks for taking the time to read this.
It's a bug on the UIWebview
It's been fixed on cordova and will be available on next release, but you can use this plugin meanwhile
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
For some reason, my div of id "home" (landing image/screen) disappears on just iPhones when I run responsive test. Other mobile devices were fine, it's a PNG file so I'm not sure what is going on.
It's probably a simple CSS issue but nothing so far I've tried is working
http://productvisionclub.com/
It's not the div that's disappearing, it's the background going white, and you can't see the logo because it's white-on-white.
background-attachment: fixed doesn't play nice with mobile (google it, e.g. Fixed background image with ios7). If you remove that property, you can see the div, background and logo.
I am new to building apps with monaca. I have built a lot of websites with css and html , so am very familiar with the language .
Anyway , when i give a background image to the navigation bar with css like this
background: url(img/header.png);
it works in the preview emulator, but when i run/sync it with my phone the image doesnt show on it. i am running it on my samsung galaxy s5
I am beginning to wonder if theres a right way of doing it on monaca.
Try to add this property to the style of your toolbar: background-size: contain.
It works for me in Monaca preview and debugger. For some reason the image size is different.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
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.