Semantic ui List: Enable scrolling bar

css semantic-ui
pedjjj picture pedjjj · Jul 16, 2015 · Viewed 13.6k times · Source

I have a semantic ui list which contains so many items that it is longer than the window. I want to have a scrolling bar only for the list itself, however, the browser displays a scrolling bar for the complete website.

Should I put the list in a container div and set its height=100% or what is the best way to achieve this?

Thanks a lot :-)

Answer

ALPHARD. picture ALPHARD. · Jun 8, 2016

Add the following css to you ui list div:

height: 100%;
overflow: scroll;

To make this work, you have to make sure the div containing you list div has some fixed height. In the comment you mentioned that setting 100% doesn't work, this can happen if one of "ancestor" divs does not have fixed height.

Related questions

Center div on the middle of screen

What is the best pattern to align a semantic ui grid in the middle of the screen? the css for this will ideal be this one. .div{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100…

Read More
Semantic UI centre aligned login box?

I am using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using …

Read More
Vertical alignment of a div using Semantic-UI

I can't seem to find it anywhere in the docs. Is there a way to vertically center a div on the page using Semantic-UI semantics :) Here is what I'm trying to do: <div class="ui centered grid"> <…

Read More