Geek Answers Handbook

Scroll bar in div in zurb 3 base

My question is very simple. But I have googled and googled and googled but have not found the answer.

I have a simple layout in zurb foundation 3

<div class="row" id="wcont1"> <div class="three columns" id="wcont1a"> </div> <div class="six columns" id="wcont1b"> </div> <div class="three columns" id="wcont1c"> </div> </div>

I want that when filling out the wcontb column, it should not expand beyond a certain point (defined by me), but instead, it should scroll vertically using the up and down arrow icons.

I am newbie. I appreciate the detailed answer and working example using zurb foundation 3.

+4
source share
1 answer

There are two problems here:

  • So you want to limit the height of the middle div ( wcont1b ) so that the content scrolls when it reaches a certain point.
  • So you make a beautiful way to do it

Please note that the two problems are separate. So, enable the first one and using Zurb Foundation 3.2.2, you can arrange your three divs like this:

  <div class="row" id="wcont1"> <div class="three columns" id="wcont1a"> <div class="panel"> Content goes here... </div> </div> <div class="six columns" id="wcont1b"> <div class="panel"> <h4>Content goes here...</h4> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> <div class="three columns" id="wcont1c"> <div class="panel"> Content goes here... </div> </div> </div>

I filled out wcont1b so we can see the scrollbar in action. I also put the contents of the sample inside the zurb panel (using the panel class) so you can better see how zurb panel are separated and how the scrollbar works (I will show you two approaches).

So now you have that tall div ('wcont1b`) in the center, and we want it to have a certain height, so it will not consume much space, especially when viewed on a mobile phone (although I personally prefer to have a tall div, than short with a scroll bar , especially if there is content outside of the div and below ). To control the height of the div you need this in your css:

Approach No. 1

#wcont1b .panel { max-height: 150px; overflow-y: scroll; }

The maximum height value is the height limit of wcont1b and, of course, you must change it according to your requirement. Overflow-y is the one that takes care of the scrollbar. This approach is undesirable if you have a header in wcont1b and you DO NOT want it to scroll along with the content. To make it more beautiful, you must do this:

Approach # 2

#wcont1b .panel ul { max-height: 150px; overflow-y: scroll; }

Note that only the list scroll and title remain on top. The difference is that your css is now targeting ul , a list, not all content or all wcont1b .

With this, you now have a height-controlled div. But I think that you want the scroll bar to look beautiful and that jquery plugins appear there. You told us that you tried millions , but you did not show us any code, and it is important that you do. But let me give you an example anyway using jscrollpane, which you can get here . After you have downloaded the necessary files and indicated them on your page, you need to do the following:

The code required for Approach # 1:

 <script> $(window).load(function(){ $('#wcont1b .panel').jScrollPane(); }); </script>

Code required for approach # 2:

 <script> $(window).load(function(){ $('#wcont1b .panel ul').jScrollPane(); }); </script>

To do this, it must solve your problem. If you have more problems, you need to provide as much information as you can so that people here can help you.

+10
source

More articles:


All Articles