Bujanca Mihai Bujanca Mihai - 4 years ago 176
HTML Question

Add scrollbar to html

I have a popup window that with the following source code ("likes.php"):

<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
</body>
</html>


Now the problem is that although all the paragraphs are created, I can't see them, because there is no scrollbar. How can I attach a scrollbar to my page?

Link to printscreen

It is working on chrome, but not in firefox IF it comes in a popup window (other file calls window.open("likes.php"). Works in both browsers in regular windows.

Answer Source

Use the css overflow property. Add this to your <head> tag:

<style type="text/css">
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  } 
  .scroller {
    overflow: scroll;
    padding: 5px;
    height: 100%;
  }
</style>

To specifically add a horizontal or vertical scrollbar, use overflow-x or overflow-y, respectively.

You'll also want to fix the close tag of your <li> element, and wrap it in a proper container, like this

<div class="scroller">
  <ul>
    <?php for($i=0;$i<500;$i++)
              echo "<li>".$i."</li>";
    ?>
  </ul>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download