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.

Answer 1

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>

Answer 2

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.

Answer 3

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>