CODEWITHSUNDEEP
htmlimage
Jeremy
Jeremy

Reputation: 3528

Images are not triggering overflow-x scroll bar as expected in parent div

Hi I have been trying to create a simple image gallery, but am having issues getting the overflow-x scroll bar to appear when my images cumulative width reach a value greater than their parent div.

Check out this fiddle demonstrating the problem.

I just want to be able to resize the window and have the overflow-x scroll bar to appear when there are to many thumbnails to display horizontally within the available width of their parent.

Upvotes: 1

Views: 5216

Answers (3)

IpponSolutions
IpponSolutions

Reputation: 58

The cleanest, and easiest way to achieve this is to add white-space: nowrap; to your container div and the images within it:

CSS

.container {
    height: 140px;
    width: 100%;
    border: solid 1px red;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

img {
    white-space: nowrap;
}

HTML

<div class="container">
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
</div>

Should dynamically adjust as required, enjoy!

Upvotes: 3

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

Here is another pure CSS solution:

I placed the images in another div 

<div style='height:100%; display: inline; white-space: nowrap;'>

check jsfiddle.

PS: I copied the images a few times just to show how it looks with more images. The inline css can be moved to a class or ID but that's up to you.

EDIT: Wrong link. Sorry, i replaced it :)

Upvotes: 3

gvee
gvee

Reputation: 17161

This fiddle should do the trick... There is a fixed width container for the thumbnail images which has a horizontal scrollbar when the contained images overflow to the right.

HTML

<div class="gallery-container">
    <div class="gallery">
        <div class="thumbnails">
            <img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
            <img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
            <img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
            <img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
            <img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
            <img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
        </div>
    </div>
    <img class="fullpic" src="" />
</div>

CSS

.gallery
{
    border: 1px solid black;
    height: 120px;
    width: 200px;
    overflow: hidden;
    overflow-x: scroll;
}

.thumbnails
{
    /* Arbitrarily large number */
    width: 10000px;
}

.gallery-container img /* larger size image */
{
    width: 200px;
    height: auto;
}

.thumbnails img
{
    width: auto;
    height: 100px;
    display: block;
    float: left;
    border: 1px solid #ddd;
    margin: 1px;
}

(Optional) JQuery

$('.thumbnails img').click(function() {
    $(this).parent().parent().find('.selected').attr('src', $(this).attr('src'));
});

Upvotes: 0

Related Questions