Resolved Horizontal row of scrolling images

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
489
2
Madison, WI
I'm working on placing a row of panoramic images inside my iPad hybrid app. Basically, all I need is for the user to be able to scroll sideways through a row of four or five images while keeping the rest of the site stationary. Apparently, this is possible just by placing images inside a div and setting overflow to "auto."
I can't seem to get it to work, my images always show up one beneath the other instead of in a row. Here is my code so far:

CSS
div.scroll {
height: 1024px;
width: 768px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

HTML
<div class="scroll">
<img src="images/image-1.jpg"/>
<img src="images/image-2.jpg"/>
<img src="images/image-3.jpg"/>
</div>

I saw somewhere that it might have to do with the display property, inline vs. block, but I can't figure that part out either. Any help would be appreciated.
 
Last edited:

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
489
2
Madison, WI
I think I figured out a solution by adding
Code:
white-space:nowrap;
to my css. I'm not really sure why it worked, but it did.
 

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
489
2
Madison, WI
I tried that. It should have worked but it didn't. It was the method usually suggested when I tried Googling before posting here but it resulted in only one image showing up.
 

bpaluzzi

macrumors 6502a
Sep 2, 2010
919
1
London
I tried that. It should have worked but it didn't. It was the method usually suggested when I tried Googling before posting here but it resulted in only one image showing up.
The inline still wraps based on the size of the container. If you want your scroll to be wider than the width of the page, you'd need to set an explicit width for the image container.

An alternative is to set up a float, but that can be more trouble than it's worth.
 

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
489
2
Madison, WI
Ah, I tried using an explicit width, but I may not have used it with display:inline at the same time. I was trying everything. I also had a weird problem where all my images had gaps between them, which I finally figured out was a bug where if you had your html code on separate lines it created gaps, even though that should never happen. Sigh, so many problems just to create scrolling images in the iPad's viewport.
 

bpaluzzi

macrumors 6502a
Sep 2, 2010
919
1
London
Ah, I tried using an explicit width, but I may not have used it with display:inline at the same time. I was trying everything. I also had a weird problem where all my images had gaps between them, which I finally figured out was a bug where if you had your html code on separate lines it created gaps, even though that should never happen. Sigh, so many problems just to create scrolling images in the iPad's viewport.
Yup, if you switch to display:inline, then white space will have an effect on presentation. That's the correct behaviour.