I'm developing a web-app for both Android and iOS.
I have encountered a problem with the styling of the app.
For some reason, styles applied to a <select> won't display on MobileSafari (aka iOS WebView)
CSS:
p,
input,
select,
option,
button {
font-family: Arial, ArialHebrew, sans-serif;
font-size: x-large;
text-align: center;
color: #FFF;
margin: 1vh;
padding: 1vh;
}
input,
select,
option,
button {
background-color: #333;
border-radius: 1vh;
border-color: transparent;
}
How i want it to look (Chrome, Android):
How it looks (MobileSafari, iOS):
What do i need to change in my CSS to apply the style to the <select>?
The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.
To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.
Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/
And the fiddle in iOS simulator:
Related
I am currently working on a project using Google's Polymer project. The issue that I am having occurs only in Safari on iOS. In the current chat view that I am working on, when a user scrolls through the chats everything works great. It is when the user taps on the keyboard there is then this gap that sticks and is difficult to get rid of.
Please see the images below and if anyone could point me in the right direction it would be greatly appreciated.
I have several more pictures but I am unable to post due to my reputation being less than 10. Thank you to everyone in advance for any help.
Here is what happens after the keyboard has been opened and put away. You can see in the image that there is now a gap.
Here is the CSS for the container
.message-sender-container {
#apply --layout-horizontal;
#apply --layout-center;
#apply --layout-around-justified;
background: white;
border-radius: 5px;
max-width: 400px;
margin: auto;
position: sticky;
position: -webkit-sticky;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
bottom: 2%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
HTML:
<div class="message-sender-container">
<paper-textarea id="message" label="Message..."></paper-textarea>
<paper-button id="image-btn" on-tap="_onTapImageBtn" class="flex" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:insert-photo"></iron-icon></paper-button>
<paper-button id="send-btn" on-tap="_onTapSendDialogBtn" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:send"></iron-icon></paper-button>
</div>
I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
I initially asked this question: changed jQuery Mobile's default icon set, work on browser, failed on device, but later, I found this could be a phonegap issue.
Is there anyone who has experience in changing JQuery Mobile's default set in phonegap?
Check my other post about the problem description.
Any suggestions?
Try using custom icon
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
In html page
<a href="#" data-icon="customicon" ></a>
Well, i suggest the same that i've already suggested in your previous question... It should help if you only need to change icons.
But if you now want to change styles of JQuery Mobile elements - than you can change styles of corresponding classes or use custom elements as Ved has already mentioned.
ok, I added !important to the end and that works:
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) !important/*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
I'm trying to get custom jQuery mobile navbar icons and it's not working. I know the question has been asked before and I think I am doing it right can someone look at my code and see if they can see the problem please.
.ui-icon-directions {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png") 50% 50% no-repeat;
background-size: 20px 20px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
http://jsfiddle.net/ragingnomad/NHC9p/5/
In jQM 1.4.x, background image is applied to the :after pseudo-selector:
.ui-icon-directions:after {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png");
}
Here is your updated FIDDLE
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)