I am programming a simple movieDB app with Ionic. A part of it is listing actors, who play in a movie as a scrollable vertical card list. I am using good ol' divs and custom CSS.
This is how it looks like in a browser (Firefox 38 on Mac): this is the DESIRED behavior
however when I emulate it on iOS (iOS 7.1.1 on iPad) I get this:
It is scrollable, but the divs overlap. They are collapsed.
You can find my CSS code below. I believe that I have tried a combination of every -webkit tag out there and I still can't get it to work.
Any help greatly appreciated :)
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
align-items: center;
#actor {
height: 30vh;
width: 15vw;
margin-left: 2vw;
padding-top: 12vh;
border-radius: 5px;
text-align: center;
background-color: cornflowerblue;
}}
UPDATE 7:45 GMT 25.6.2015
Thanks to COOOL's answer I am able to track the origin of this behavior, so I am updating the question:
In browsers, overflow-scroll extends the flexbox to accomodate all items with their original widths. However with the current code, iOS just squeezes them all in the original dimensions of the flexbox. If I were to put anything more than 100px they would overlap again (see the code below).
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
align-items: center;
.actor {
height: 30vh;
width: 100px;
min-width: 100px;
However if I set width of #actorsBox to something big (say 2000px) the items are spaced out nicely again.
It seems to me that -webkit-overflow-scrolling is the cause of the issue. Does anyone have some experience with this?
Well, firstly your using a div #id for an area you should be using a .class
a .class is for selecting multiple instances as an #id is for one unique instance.
It looks like you have #actor as the selector of the problematic content. And it looks like your width is being ignored.
You can firstly try using px or % (instead of vw) where you have this: width: 15vw;
Or define a min-width for the actor boxes.
.actor { // firstly change to a class
height: 30vh;
width: 15vw; // mobile browser could dislike this, if below doesn't work try using % or px
min-width: 20px; // or whatever is relevant, may require some testing
/// the rest of your cool styles
}
Update: (re: your comment)
If 2000px on #actorsBox responded well, then you may need to add a min-width there as well. (or at-least define a width)
#actorsBox{
// all your previous styles
width: 1000px; // hows it gonna know when to overflow, bro?
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
// I would add min-width in px then width 100% and a max-width in px
// but declaring a width here is all you need
align-items: center;
}
In any case you need a width defined where you have an overflow-scroll defined. This is likely your issue; if the above still doesn't work try also adding this position:relative; to assure .actor is relative to this as a wrapper
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.
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.
n00b question alert, but I've been struggling for a few days with this one and have searched in vain for the solution in other posts!
I have a horizontal menu that has padding either side of the text such that the items appear separated. However upon replacing the text with sIFR, the padding doesn't appear, and thus the items all look like they are separated by only a space (and it looks like they are all within the same flash movie). I need to separate them!
The css is set as so:
#menu a {
height: 30px;
padding: 8px 38px;
letter-spacing: -1px;
text-decoration: none;
font-size: 22px;
color: #000000;
}
I've tried putting the same in the sifr.css at the bottom:
.sIFR-active #menu {
padding: 8px 38px;
visibility: hidden;
font-family: Verdana;
font-size: 19px;
text-decoration: none;
}
That doesn't work. I've tried putting this into the sIFR.replace function too, as well as a few other directives like tuneWidth... I haven't managed to get this working no matter what I try! Can anyone help?
If you want to have a look at an example page go here: http://www.ak40.co.uk/invitation.htm
Many thanks in advance.
Kev
Put some margin around the Flash movies instead.