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
Related
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:
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 am trying to finish my first website and thought it was pretty much finished but am having an issue with viewing some page layouts on an iPhone 5 (S and C). On my 4 it's fine and on an iPad I tested it on. Also fine on Android.
The issue is the fixed navbar (bootstrap) is bouncing around on the galley pages (it's a photography site) which have a horizontal scrolling div but it's ok on standard page layouts. I have disabled a mouse wheel plugin it's running to check if it's that and it has no effect on the iPhone 5 issue. Normal layout pages are fine.
the url is: http://www.pjrundle.co.uk
The problem occurs on any of the photography pages.
Sorry if this is a really obvious newbie question. Here is the css for the div containing the side scrolling gallery. I tried removing absolute positioning and no effect.
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
}
Any advice greatly appreciated.
Thanks.
Thanks mijopabe, I fixed it in the end by adding:
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
width: 100%;
overflow: auto;
}
Not really sure why it worked without this on other browsers to be honest but fixed anyway.
Cheers.
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;
}