Create horizontally scrolling List Item view using Bootstrap Columns

Question

I would like to display a number of records in a horizontally scrolling div. I'm using Twitter Bootstrap and have setup a div row with each data record represented as a column.

If I need to dump Bootstrap grid for this part then that is fine, I'm not really using it the way it was designed I suspect... If I were to not use Twitter Bootstrap for this part then my question is almost identical to Prevent floated divs from wrapping to new line. The problem with the accepted answer on this question is that it assumes you can calculate the total width of your container. In my case the number of item div's is dynamic.

I'm looking for a pure CSS/HTML solution. If Javascript is required, I am using AngularJS with no jQuery.

My Example: http://jsfiddle.net/V5zWT/2/

CSS

.DocumentList
{
    overflow-x:scroll;
    overflow-y:hidden;
    height:200px;
    width:100%;
    padding: 0 15px;
}

.DocumentItem
{
    border:1px solid black;
    padding:0;
    height:200px;
}

HTML

<div class="DocumentList"> 
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
    </div>
</div>

As you can see from the fiddle, only the first 4 records are displayed. Because of the CSS float (I'm assuming) the scroll bar does not activate and the other records are not shown. If I don't hide overflow-y then I can scroll down and see the hidden records, but that's not what I am going for.

I think this would work for you! http://stackoverflow.com/questions/11320323/tw-bootstrap-how-to-overflow-columns — PrincessBelle, Aug 05 '14 at 23:28

score 26 · Accepted Answer · answered Nov 07 '13 at 14:44

I managed to get it working using almost stock Twitter Bootstrap:

Fiddle: http://jsfiddle.net/V5zWT/12/

I used an unordered list with the list-inline class. By default this will still wrap when it reaches the edge of the container, so I tweaked the list-inline class.

.list-inline {
  white-space:nowrap;
}

<div class="DocumentList">
    <ul class="list-inline">
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
    </ul>
</div>

@peter , After long search finally i created horizontal scroll list with your suggested answer. but i am unable to add next - previous button functionality in that scroll list. where each next/previous button click scroll the list. can you please help me to achieve this? — Jatin Patel - JP, Jan 15 '16 at 14:20

score 15 · Answer 2 · edited Mar 09 '16 at 17:50

15

To allow horizontal scrolling check this github link

Download and include bootstrap-horizon.css after bootstrap.css. as

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-horizon.css">

Sample code

div class="row row-horizon">
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
</div>`

it works for me.

edited Mar 09 '16 at 17:50

Pier-Luc Gendreau

13,553
4
58
69

answered May 04 '15 at 11:56

Mahbub

4,812
1
31
34

3

awesome, saved a lot of time from this :) – Saurabh Udaniya Nov 03 '15 at 10:26
1

Good, Works like a charm. – Mohanvel V Mar 18 '16 at 04:18

luke · Answer 3 · 2013-11-05T22:45:40.913

2

Maybe this will help you:

FIDDLE

If the .DocumentItem width is fixed you can count the width of scroll element and set it dynamically.

<script type="text/javascript">
    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();
    $('.row').css('width', totalWidth + 'px');
</script>

edited Nov 05 '13 at 22:45

answered Nov 05 '13 at 22:31

luke

3,531
1
26
46

I'm actually using angularJS with no jQuery... I added angularJS to my tags. – Peter Nov 06 '13 at 00:52
Isn't AngularJS built on jQuery Lite? I have had success in the past using jQuery within AngularJS – Matthew Zackschewski Oct 31 '19 at 13:31

Create horizontally scrolling List Item view using Bootstrap Columns

3 Answers3

Linked