Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;
Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.
#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}
Related
I have a website that has a different theme from its mobile site.
They share the same content and plugin , but different themes.
I have 3 buttons that are on my mobile site that shows clear only on certain phones.
when I pull up the site on a different phone, sometimes the buttons look smashed together and almost like the dont have css linked to them
why does this happen on certain phones , idk.....
the buttons say "search jobs" "employers" "candidates"
what could this be, please help
https://hughesjobs.net
Different Phones have different operating systems and (very likely) different web-browsers. Each browser hast its very unique default-css-files embedded. If you do not specify your css entirely, then a browser will "fall back" to its own unique default-css-file (at least regarding the undefined css properties).
This happens a lot with Iphones, Ipads, etc.
Mobile devices have (again) their own css-properties.
Your question is regarding the consistent design of buttons.
The answer is: debug on different devices AND be 100% specific about all css properties.
BR
update:
according to your code, this detailed css-styling should make your buttons look the same in different browsers:
.containerm button {
padding: 5px;
margin: 5px;
width: 100px;
height: 36px;
background-color: #BBB;
color: white;
font-size: 14px;
}
I have a problem with a web application. I have these CSS rules to make sure that if text is overflowing it will be shown with three dots. It works perfectly on all browsers that I have tested(desktop and mobile). One big except is android stock browser and more importantly only RTL mode (I have attached an image of the rendered output).
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The output should be Option 1, Option 2 and so on. There is enough space to fit this small text there but is cut off.
I have tried to use text-rendering: optimizeLegibility option and it helps in some cases but not all.
Does any one have any ideas what might be a solution for this problem?
Thank you for your time!
I am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
I'm creating webview application in android using jquery mobile framework.
I need to show table that has width more than screen.
The horizontal scrollbar is not showing.
I have tried many ways but none worked for me.. (a lot of people facing the same problem with me, i have tried all of google search result link in page 1 to 3, some link from stackoverflow too)
Any suggestion?
*sorry for my bad english..
I had a very similar problem, and I found a workaround (bug-fix?) for my situation via some experimentation.
In the JQuery Mobile CSS file ("jquery.mobile-1.1.0-rc.2.css" for me), I changed line 1119 from:
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
to:
.ui-content { border-width: 0; overflow: visible; overflow-x: scroll; padding: 15px; }
This allowed my CSS (with absolute widths and coordinates) to be scrollable horizontally.
Once you modify your local copy of the JQuery Mobile CSS, don't forget to change the link in your html header.
Again, I'm not sure if the previous behavior was intentional or not. It may very well be inline with the design goals of the Jquery Mobile team. But this change worked for me. Hope it helps.
I suspect this is a bug that I found in this forum.
http://forum.jquery.com/topic/horizontal-scroll-views
But here they talk about some other alternative for this called swipe by which you can achive this
There are already some talk about this in site itself and you can refer it.
Swipe among activities in android
So I'm making an app for android 2.1 using phonegap and there is some extra blank margin on the right side (about 5px) that makes the page horizontally scrollable (I really want to avoid that).
I went crazy changing and testing css until I tried to check widths with javascript.
(device is 320px wide)
main div is 320px, body is 320px and document is 320px... but window is 325px!
I'm blaming it all on this window weird width, but I don't really know what to do...
I guess this is some kind of bug (since everything runs fine on 2.2). But is there a workaround? Is someone experiencing this too? Thanks in advance!
It's hard without code, but I had the exact same problem and solved it with:
body {
margin: 0px;
}
Maybe padding too. Check your page in a browser like Chrome and check the metrics of the body or any other elements that might cause problems.
problem solved, although it doesn't make much sense...
my "main div" (which covers all the page) had this css rules:
.main-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
it seems that there is some kind of calculating issue with this positioning in android 2.1 that makes it larger than it is meant to be.
after changing the positioning from "absolute" to "fixed", it becomes fit with the screen, no right margin.
it may be a bad fix for one who needs to use the absolute positioning, but it's fine for my case.
i hope this helps someone someday ;)