How to make a horizontally scrollable div with image thumbnails inside in bootstrap3

Question

I am trying make a horizontally scrollable div which has 3 sub-divisions inside. The sub-divisions have 4 image thumbnails inside them each. I am having trouble to get the this layout working.

HTML

<div class="col-xs-12">
    <div class="canvas-scrollable">
        <ul class="list-inline clearfix">
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
           <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
</div>

CSS

.canvas-scrollable{
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.canvas-scrollable .item-inner{
    height: 300px;
    margin: 10px;
    /*white-space:nowrap;*/
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.item-thumb{
  width: 50%;
  height:50%;
  padding: 4px;
  border: 1px solid green;
}

.item-thumb img{
   height: 100%;
   object-fit: cover;
}

The images won't fit inside the container divs. the height: 100% is making images occupy the entire 300px height of the outermost div.

Please edit my JSFiddle here. Hope I was clear enough with my question

Take a look at this. http://stackoverflow.com/questions/19800008/create-horizontally-scrolling-list-item-view-using-bootstrap-columns — roxid, Mar 25 '15 at 09:34
I actually tried the same example before posting the question here. Everything works great except for the width of

roxid · Accepted Answer · 2015-03-25T12:03:16.080

0

Take a look here .Were you trying to achieve something like this??

CSS :

ul.horizontal-slide {
    margin: 0;
    padding: 0;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

Check out the updated fiddle

http://jsfiddle.net/2arvozpc/2/

edited Mar 25 '15 at 12:03

answered Mar 25 '15 at 10:08

roxid

493
4
14

Exactly the same layout, except instead of directly having the thumbnails like you have shown, I want 4 thumbnails each inside every sub element......... My updated fiddle is here http://jsfiddle.net/V5zWT/241/. In this fiddle, I want 4 thumbs each inside every list item..... as a 2*2 grid (2 rows 2 columns) – Chandan D Nadig Mar 25 '15 at 10:31
hey, if you don't mind, can you use the same markup that I have posted with same classes to help me with your fiddle !! Thank you – Chandan D Nadig Mar 25 '15 at 10:37
i am not getting your question or what type of layout.Can you simply create some demo image in paint and show here.May be then i can help. – roxid Mar 25 '15 at 10:42
Please see my answer for the image – Chandan D Nadig Mar 25 '15 at 11:28

Chandan D Nadig · Answer 2 · 2015-03-25T19:09:14.617

0

@roxid : hey thanks for the solution, but the problem seems to persist.

The images are not showing up at all. I am using Bootstrap 3.3.2, so span2 doesn't exist...... I am getting something like this. The images are of size 0px X 0px !!!

When I added my own images, the list-item occupies the entire width

I feel totally stuck my friend. Not able to figure out at all what I am missing

UPDATE

Made a lot of changes and finally got this layout which adjusts dynamically

enter image description here

Pending Issue:

white-space: now-wrap is not working in IE10. Can someone tell me if I have to write an IE specific code for that !!

edited Mar 25 '15 at 19:09

answered Mar 25 '15 at 13:50

Chandan D Nadig

157
1
4
21

See this http://jsfiddle.net/chandannadig/2arvozpc/4/. Everything is fine here, but the same code is not workin on my page. – Chandan D Nadig Mar 25 '15 at 13:58

How to make a horizontally scrollable div with image thumbnails inside in bootstrap3

2 Answers2