How to show scrollbars for a DIV that contains stuff...?

HTML & CSS
1

My apologies for posting this here as well as in the JavaScript forum a couple of days ago. I will delete the other post tonight.

Hello,

There’s a DIV with a fixed height, containing a data table. I can’t get the DIV to show overflow-y scrollbars after a page refresh.

This is a bit odd, because in normal situations, this isn’t (or shouldn’t be) so hard to do. In my case, however, the code that makes up the DIV containing the data TABLE gets generated by way of five PHP and JavaScript files.

Sadly, the developers have also hard-coded some CSS throughout their non-CSS files, but I think I’ve tracked most of that down and took it out for the most part.

The issue: When the data table contains more rows than the three rows that are visible, and the user clicks, say, row #22, then the page reloads and the clicked row (#22) is not visible. The user will have to scroll down to see what they’ve clicked.

Not very practical, because this page requires evaluation of the selected row item and therefore the end-user needs to see the details about the selected item.

This is what it looks like before:

After wading through multiple PHP classes and JavaScript include files, I was finally able to pin-point the spot where the data table gets redrawn.

Then I’ve tried some crazy things with offsetHeight, scrollHeight and overflow, and it sort of works — in terms of scrolling the desired table row into view.

The problem is: Now the vertical scrollbar of the DIV container has disappeared. Or sometimes, it shows up, but I can’t scroll more than a few pixels, and the top of the table can never be reached.

So this is what it looks like after:

Here is a snippet of my most recent attempt:

                objDiv.style.display = "none";
                objDiv.style.position = "relative";
                objTbl.style.position = "absolute";
                objTbl.style.width = "450px";
                objTbl.style.height = "100%";
                objTbl.style.scrollHeight = (intHt +5) + "px";
                objDiv.style.height = "95px";
                objDiv.style.scrollHeight = (intHt +5) + "px";
                objDiv.style.overflowY = "scroll";
                objDiv.style.display = "block";
                objTbl.style.top = "-20px";

intHt = the actual height of the data table inside the DIV.

Although I have all the other variables to determine the height of the table rows, the location of the selected row (plus how many rows are above/below it), for now it would just like to figure out what I am doing wrong here.

By the way, the DIV is hard-coded to be 95px high.

The View Source doesn’t show much, other than the DIV container; the table gets added into that DIV by way of PHP and JavaScript. So here’s the HTML that gets generated before the table inside the DIV (id = tableSelector) shows up:

<div class="grid_8 alpha" id="evaluation_area_left">
<div id="tableSelector"><!--TABLE GETS INSERTED HERE-->></div>
<div class="clear"></div>
<div id="sliderArea"></div>
<div class="clear"></div>
<div id="apprComments"></div>
</div>

Any hints or suggestions, anyone?

Thank you.

2

Yes it’s a useful css3 pseudo class which comes in handy for showing users where they have jumped to in a page because you can add a highlight to the target (or other styles as required). It’s not supported in IE as yet but Safari, Opera and webkit support it.

http://www.w3.org/TR/css3-selectors/#target-pseudo

3

Thank you!

Your reply is greatly appreciated. I’ll give this a try right now.

Thanks again!

4

I already removed it :slight_smile:

The issue: When the data table contains more rows than the three rows that are visible, and the user clicks, say, row #22, then the page reloads and the clicked row (#22) is not visible. The user will have to scroll down to see what they’ve clicked.

The issue does seem more javascript related but unless I had a working copy to play with I can’t really shed much light on this.

This may be miles wide of the mark but wouldn’t it be easier to let the browser do the work for you and simply attach a fragment identifier on page load so that it goes to the required table row.

This is what it would look like in normal html/css.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {width:500px;}
tr:nth-of-type(odd) {
background:#ccc
}
td {border-bottom:1px solid #000}
.wrap {
    overflow:auto;
    width:520px;
    height:96px;
}
:target {background:red}
</style>
</head>
<body>
<p><a href="#ten">Go to row 10</a></p>
<div class="wrap">
    <table>
        <tr>
            <td>1 testing</td>
        </tr>
        <tr>
            <td>2 testing</td>
        </tr>
        <tr>
            <td>3 testing</td>
        </tr>
        <tr>
            <td>4 testing</td>
        </tr>
        <tr>
            <td>5 testing</td>
        </tr>
        <tr>
            <td>6 testing</td>
        </tr>
        <tr>
            <td>7 testing</td>
        </tr>
        <tr>
            <td>8 testing</td>
        </tr>
        <tr>
            <td>9 testing</td>
        </tr>
        <tr id="ten">
            <td>10 testing</td>
        </tr>
        <tr>
            <td>11 testing</td>
        </tr>
        <tr>
            <td>12 testing</td>
        </tr>
        <tr>
            <td>13 testing</td>
        </tr>
        <tr>
            <td>14 testing</td>
        </tr>
    </table>
</div>
</body>
</html>

You’d just have to output an id into each tr but that shouldn’t be a problem and then when refreshed attach the fragment identifier to the page reload destination.

5

Paul is :target new to CSS3?