CODEWITHSUNDEEP
htmlcss
Noman Hanafi
Noman Hanafi

Reputation: 377

Scroll bar is not activating?

I were trying to add scroll bar at this part of html document,but scroll bar doesn't working properly,it is appearing without any button,but what can i do todo so that it will work properly?

<div class="test-1" style="overflow-y:scroll">
  <div class="test-2">
    <ul>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 63

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can set height on .test-1 so when content of this div overflows its height scroll bar will work.

<div class="test-1" style="overflow-y:scroll; height: 70px; border: 1px solid black;">
  <div class="test-2">
    <ul>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
    </ul>
  </div>
</div>

You can also use overflow-y: auto so now scroll bar will only appear when content overflows parents height and not before.

<div class="test-1" style="overflow-y: auto; height: 70px;">
  <div class="test-2">
    <ul>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
      <li><a href='#'>Internet</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions