Horizontal scrolling not wroking

Question

I'm using the jsfiddle/code from this question Create horizontally scrolling List Item view using Bootstrap Columns but for some reason it doesn't work for me and I can't find out why.

I have a simple html file

<!DOCTYPE html>

<html>
 <head>
  <title>this is the title</title>
   <link href="projects.css" rel="stylesheet">
 </head>
 <body>
<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>

 </body>
</html>

plus my css file

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

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

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

but only this shows up:

help?

score 1 · Accepted Answer · answered Aug 31 '16 at 04:09

1

adding display: inline-block to .DocumentItem will fix this issue issue!

border: 1px solid black;
padding: 0;
width: 500px;
display: inline-block;
height: 200px;

Note I've added width: 500px to your DocumentItem class so you can really see the difference!

I've also created a fiddle for you: https://jsfiddle.net/tfdedn3y/

answered Aug 31 '16 at 04:09

James111

15,378
15
78
121

1

@teresawithoutah No worries! You can accept it if you like :D – James111 Aug 31 '16 at 04:15
1

gotta wait two more minutes, dw I got you. – teresawithoutah Aug 31 '16 at 04:16

score 1 · Answer 2 · answered Aug 31 '16 at 04:13

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

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

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

<!DOCTYPE html>

<html>
 <head>
  <title>this is the title</title>
   <link href="projects.css" rel="stylesheet">
 </head>
 <body>
<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>

 </body>
</html>

score 0 · Answer 3 · edited Aug 31 '16 at 04:24

Try this, if You set width 100% to .DocumentList so it can't scroll because scroll work with greater then 100% width.

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

And Also you have to set .list-inline to grater then 100% width to scroll div.

.list-inline {
  white-space: nowrap;
  width: 110%; /* or width px also */
}

Horizontal scrolling not wroking

3 Answers3