I found many examples with version 1.3, but as far I see there is not working version for jqm 1.4
CSS solution on listview for version 1.3 was:
background-color: transparent !important;
background-image: url('') !important;
Can someone suggets me fix for version 1.4 (1.4.4)?
tnx!
Just apply it to the LI itself:
li {
background-color: transparent !important;
}
If you have anchor tags in the listitems, then apply it to the anchor:
li a {
background-color: transparent !important;
}
DEMO
Related
I'm using the border-image property on elements with an image file set as the border background. The border image file has transparency and it works as I want it in Chrome and Firefox.
However, in IE11, the transparent area "overwrites" the background image under the border. Is there a way to fix it? I'm using the same border image on elements with various background images so I'd rather not create separate non-transparent border images for each one.
This is what I have so far:
body {
background: #000;
}
div {
background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
width: 300px;
height: 80px;
border-style: solid;
border-width: 14px;
border-radius: 5px;
}
<div></div>
Rendering comparison
border-image file:
background-image file:
Defining a border-image-width instead of border-width solves the issue in IE11. If you want to set a fallback, border-style: dashed seems to offer more consistent behaviour.
This seems like buggy behaviour but is maybe a simple difference in browser behaviour:
In Chrome, the border-width: 14px adds 14px each side and occurs without a border-style. The border-style has no affect when border-image-width is set.
In IE11, the border-width: 14px does not add 14px each side unless a border-style is set. The border-style does affect the positioning of the border-image, but only when set to solid.
Screenshot from IE11
Working Example
div {
background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
border-image-width: 14px;
width: 300px;
height: 80px;
border-radius: 5px;
}
<div></div>
On iOS (Safari 5) I have to following for input element (top inner shadow):
I want to remove top shadow, bug -webkit-appearance doesn't save.
Current style is:
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
background-clip: padding-box;
Seems to remove the shadows as well.
As #davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.
webkit will remove all properties
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
box-shadow: none !important;
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
I tried to come up with a solution that a.) works and b.) I am able to understand why it works.
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
So obviously setting background-image: none was my first attempt, but this does not seem work.
Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
My favorite solution:
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
http://i.stack.imgur.com/bbxDC.png
as you can see labels of selects and buttons not same line.
Which css i overload or change ?
The icons at left and right of the buttons/selects are causing the center alignment to use a different center. You can solve this with some CSS:
.ui-btn-inner{
padding-right: 40px;
padding-left: 40px;
}
.ui-select .ui-btn-icon-right .ui-btn-inner{
padding-right: 40px;
padding-left: 40px;
}
Without the CSS: DEMO
With the CSS: DEMO 2
Depending on the exact elements and icon-positions you are using, you may need some more CSS to equalize padding on each side of the centered text.
Is it possible to have a listview within jquery mobile with a filter search but instead of having the normal list we create a card view. So in other worlds we are still adding the <li></li> for the list but we are changing the list css to a class so that it shows like cards and not in its usual way.
Is that possible? do I need to disable some css or added a new class or something to that effect to ensure that the list looks different?
There is one implementation I was using: http://appcropolis.com/page-templates/list-of-cards/
I only hope it was updated to work with jQuery Mobile 1.3
Or you can eve do it by yourself if you know enough css. Only important thing is to change li width to lets say 50 % (pr less if you want margins), set it to float left and and full border around them. And that is that, you can do it on any listview implementation.
Working example: http://jsfiddle.net/Gajotres/NBv9B/
CSS:
.ui-listview li {
width: 44% !important;
margin: 2% !important;
float: left;
border: 1px solid #ccc !important;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
I am using sifr3 to replace a few headings. One of them has a background color.
The normal page css has h2 padding set to 0, the sifr css has the same for the replaced h2, anf the sifrconfig.js has the same, yet there still appears to be padding, slighly more on the bottom.
main css:
h2 {
font-size: 22px;
margin-bottom: 30px;
padding:0;
background-color: #339999;
width: 280px;
}
sifr css:
.sIFR-active h2 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 22px;
}
sifrconfig.js:
sIFR.replace(rockwell, {
selector: 'h2',
forceSingleLine: true,
css: [
'.sIFR-root { color:#FFFFFF; font-size: 22px; letter-spacing:-0.87; background-color: #339999; text-align: left; margin:0; padding:0;}',
]
});
Any ideas? This is driving me mad!
EDIT just worth mentioning, there is no inline styles or any other css that would override anything, and using web developer toolbar, it shows the flash movie has the extra height, not the containing h2.
Hey, I had a similar problem where I had some extra padding at the bottom which was at the bottom of the H2 tag I was trying to convert SIFR.
I found my issues was related to the doc type I was using.
I was using an XHTML Strict and when I changed it to a transitional doc type the padding was removed.
I hope this helps people, I wasted a day and went completely f-ing mental trying to track it down and fix it.
Yea, Flash does that at times. You can use the tuneHeight parameter to make the movie less high. There's also tuneWidth, offsetTop and offsetLeft.