CODEWITHSUNDEEP
jqueryhtmlcss
Aamu
Aamu

Reputation: 3611

Display scrollbar inside a fixed position element

I have elements (.block) inside a div (#block_list). The parent of #block_list is another div (#block_list-wrapper) which has a fixed position. Now since the #block_list-wrapper has fixed position, some of the elements of the #block_list are not displayed. I would like to display them using a scrollbar.

html:

<div id="block_list-wrapper">
    <div id="handle-wrapper">
        <div id="handle">
            <i class="fa fa-chevron-right"></i>
            <i class="fa fa-chevron-left"></i>
        </div>
    </div>
    <div id="block_list">
        <div class="one_column_block-1 block">
            <img src="static/image/one_column_block-1.png">
        </div>
        <div class="one_column_block-2 block">
            <img src="static/image/one_column_block-2.png">
        </div>
        ...
        ...
        ...
        <div class="one_column_block-1 block">
            <img src="static/image/four_column_block-3.png">
        </div>
    </div>
</div>

Code demo at codepen.io

I tried adding overflow: scroll like so,

#block_list-wrapper #block_list {
    width: 250px;
    overflow: scroll;
}

but it didn't help either.

How can I show scroll bar to display all the elements (.block) inside the #block_list?

Upvotes: 5

Views: 628

Answers (5)

Stefan Perju
Stefan Perju

Reputation: 298

You need to set a fixed height for the block_list element. You can use the vh property and set heigth: 100vh.

An updated CodePen here

Upvotes: 0

Basheer Kharoti
Basheer Kharoti

Reputation: 4302

Give height to the element so that you could get the scroller on div. The following link code works fine.

https://jsfiddle.net/LLrkfvhf/

Upvotes: 0

Paran0a
Paran0a

Reputation: 3457

Add height 100% to both your block_list and block_list-wrapper and then add overflow : scroll to block_list.

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28437

You do not have a height specified. You can, specify height to the container in one of the following ways:

  1. Specify height: 100vh to your #block_list-wrapper #block_list, or
  2. Specify height: 100vh to your #block_list-wrapper and then a height:100% to your #block_list-wrapper #block_list.

Your codepen: http://codepen.io/anon/pen/jbBgpo

Upvotes: 0

Ionică Bizău
Ionică Bizău

Reputation: 113475

Add the following line of code to set the height of the element:

$("#block_list").css("height", $(window).height())

Updated CodePen

Another solution would be, obviously, to do this with CSS, like the other answers say.

Upvotes: 3

Related Questions