CODEWITHSUNDEEP
phphtml
Mihai Bujanca
Mihai Bujanca

Reputation: 4217

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.

Upvotes: 4

Views: 14461

Answers (2)

p.s.w.g
p.s.w.g

Reputation: 149020

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>

Upvotes: 4

3nafish
3nafish

Reputation: 256

To control overflow, you generally need to use the CSS overflow property

overflow: scroll

as stated by p.s.w.g., but you would never need to apply this to the whole body like (s)he suggests. The browser should add a scrollbar to the full page on it's own if your code is formatted properly.

The current issue is likely caused by your not closing the second <li> tag and by the PHP being improperly formatted. You don't need a break at the end of each line. The reason the lines aren't breaking is that you haven't enclosed the <li> elements inside an <ol> or <ul>. Also, putting the beginning of your if statement, the filler, and the end inside separate php tags will just confuse the computer. Instead use:

  <?php 
    echo "<ul>";
    for( $i=0; $i<500; $i++) { 
      echo "<li>" .  $i . "</li>";
    } 
    echo "</ul>";
  ?>

Upvotes: 1

Related Questions