Become a MacRumors Supporter for $25/year with no ads, private forums, and more!

Resolved Horizontal row of scrolling images

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
490
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
490
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.
 
Comment

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
490
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.
 
Comment

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.
 
Comment

Greencardman

macrumors 6502
Original poster
Apr 24, 2003
490
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.
 
Comment

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.
 
Comment
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.