Making unordered list scrollable - html

Question

I have an unordered list which is inside a div tag and initially the list is empty. When items are added on to it, it will expand and I want it to be scroll-able once it the length of the list exceeds that of the web page, i.e I do not want the web page to scroll, I want only the unordered list to scroll. However currently, the scroll bar for my unordered list is not appearing.
My html code is:
<div style="width: 25%; float: right; " class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
<ul id="ListOfOnlineUsers" style="overflow: auto;height:100%; word-wrap: break-word;" class="list-group">
</ul>
</div>
</div>
</div>
My CSS code is
html{
height: 100%
}
{
margin: 0;
padding: 0;
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
height: 100%;
}
a {
color: #00B7FF;
}
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
/*margin-left: 60px;*/
}
.chat li.right .chat-body
{
/*()margin-right: 60px;*/
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
word-wrap: break-word;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
/*margin-right: 5px;*/
}
.panel-body
{
overflow-y: scroll;
top: 1em;
left: 1em;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/* CSS used here will be applied after bootstrap.css */
body, html {
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(rgb(154, 145, 162), rgb(12, 97, 33));
}
.card-container.card {
width: 350px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}

Answer 1

Set the list's max-height to the height of its parent (or whatever you need it to be) and then set its overflow property to auto.
Here's a quick example:
div{
border:1px solid #000;
font-family:arial;
height:100px;
width:200px;
}
ul{
list-style:none;
max-height:100px;
margin:0;
overflow:auto;
padding:0;
text-indent:10px;
}
li{
line-height:25px;
}
li:nth-child(even){
background:#ccc;
}
<div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>

Answer 2

Try to add a wrapper and set max-height to the wrapper
Html
<div class="listWrapper">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
Css
ul, li {
list-style:none;
padding:0;
margin:0;
}
.listWrapper {
max-height:100px;
overflow-y:auto;
}
Fiddle Demo

Answer 3

You can change the height of the ul to max-height: 100vh, that way the ul will always have the size of the viewport.
For browser support check this : http://caniuse.com/#search=vh
In case you want it inside a div that doesn't have the viewport height, follow #Shaggy answer.

Answer 4

With height set to 100% your container will not display scrollbars.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
.panel {
width: 200px;
}
.list-group {
overflow: auto;
height: 200px;
}
<div class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
<ul id="ListOfOnlineUsers" class="list-group">
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
</ul>
</div>
</div>
</div>

Answer 5

You have the right CSS properties defined for class .panel-body but you do not use it in your HTML yet. Move the <ul> into a separate div with the class .panel-body. That should do the trick:
<div style="width: 25%; float: right; " class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
</div>
<div class="panel-body">
<ul id="ListOfOnlineUsers" style="height:100%; word-wrap: break-word;" class="list-group">
</ul>
</div>
</div>
</div>
Edit: You should drop the overflow: auto from the <ul> or you get double scroll bars
Edit2: Yet another optimization: set margin: 0 for the <ul> and change the the .panel-body to overflow: auto, so the div's scroll bar is only visible if needed. See my fiddle

Answer 6

No need for the outer div (NOTE this is for horizontal scrollbars. Just change max-width to max-height and overflow-x to overflow-y
ul, li {
list-style:none;
padding:0;
margin:0;
white-space:nowrap;
max-width:300px;
}
ul{overflow-x:scroll;}
CodePen Live Example

Answer 7

Just set the height of your <ul and give it an overflow: scroll;.
That should do it.

Answer 8

Try this >>>
<div class = "list"></div>
and the css property >>>
/* Hide scrollbar for Chrome, Safari and Opera */
.list::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.list {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}