CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
walley
walley

Reputation: 135

Dynamically loaded table won't "overflow: scroll"

I'm dynamically loading a table with a non-fixed number of rows into a bootstrap web-page. When there are too many rows to fit the height of the page, the browser adds a scroll bar like it always does.

I would like for the <body> element to not overflow, and for the <div class="col-md-12" id="search-results"> (which contains the table) to have vertical scrolling instead.

Here is what I have tried:

// css:
body {
    overflow: hidden;
}
div.text-area {
    max-height: 90%;
}
div.search-results {
    overflow-y: scroll;
}

// the page:
<div class="container text-area">
    <div class="row">
        <div class="col-md-12" id="search-results">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Foo</th><th>Bar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td><td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

This is the format of the server's response:

<div class="panel my-panel panel-default">
    <div class="panel-body my-form">
        <table class="table my-tbl">
            <thead>
                <tr>
                    <th>Foo</th><th>Bar</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td><td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

and my jquery to add the response to the page:

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    $('#search-results').html(xmlhttp.responseText);
}

Thank you for any help!

Upvotes: 1

Views: 345

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

First, let's be clear on what overflow is and how it happens, which is actually pretty simple. I always describe it by saying "You can't put 10 gallons of water in a 5 gallon bucket. If you try, 5 gallons will overflow."

Of course that is the case, but the key here is that the bucket (your <div class="col-md-12" id="search-results"> in this case) has a definitive size (5 gallons in my analogy, but no definitive size in your code). If you put a size on the container, set the container to know what to do with the overflow and then put too much content in the container, the overflow will be handled as you desire.

I would like for the <body> element to not overflow, ...

The only way the body could overflow is if you have set dimensions on it and then have it contain content bigger than those dimensions. Given that body represents the entire page, we would never really want to do this, meaning that the body does not ever overflow - - it just flows. As a result, this code:

body {
    overflow: hidden;
}

is not doing anything for you and should be removed.

...and for the <div class="col-md-12" id="search-results"> (which contains the table) to have vertical scrolling instead.

Then it is the <div class="col-md-12" id="search-results"> that should have a finite size set on it and overflow:scroll defined for it. You've got the overflow:scroll set up but no size.

Upvotes: 3

Related Questions