Resolved Horizontal row of scrolling images

Discussion in 'Web Design and Development' started by Greencardman, Aug 16, 2012.

  1. Greencardman, Aug 16, 2012
    Last edited: Aug 16, 2012

    Greencardman macrumors 6502

    Joined:
    Apr 24, 2003
    Location:
    Milwaukee, WI
    #1
    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.
     
  2. Greencardman thread starter macrumors 6502

    Joined:
    Apr 24, 2003
    Location:
    Milwaukee, WI
    #2
    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.
     
  3. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #3
    Code:
    div.scroll img{
      display: inline;
    }
    Would be the way I'd do it. (Untested as I'm at work)
     
  4. Greencardman thread starter macrumors 6502

    Joined:
    Apr 24, 2003
    Location:
    Milwaukee, WI
    #4
    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.
     
  5. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #5
    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.
     
  6. Greencardman thread starter macrumors 6502

    Joined:
    Apr 24, 2003
    Location:
    Milwaukee, WI
    #6
    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.
     
  7. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #7
    Yup, if you switch to display:inline, then white space will have an effect on presentation. That's the correct behaviour.
     

Share This Page