teresawithoutah teresawithoutah - 3 months ago 15
CSS Question

Horizontal scrolling not wroking

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:

enter image description here

help?

Answer

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/

Comments