CODEWITHSUNDEEP
htmlcssangularjsformattingscroll
Christos Hayward
Christos Hayward

Reputation: 5993

Why am I not getting scrolling in this div?

In How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height?, I thought I'd isolated a simple test case for the issue I am running into, namely DIVs with max-height and scroll of auto set. However, while the answer to How can I get a div that treats line breaks as significant to scroll if it exceeds a certain height? results in unchanged behavior: the div contents in question are however tall their content is, and do not seem to scroll. So let me give my source code:

The CSS:

<style type="text/css">
    div.user{
        height: 30%;
        max-height: 30%;
        overflow-y: scroll;
        white-space: pre-wrap;
    }
    div.user div.text{
        height: 30%;
        max-height: 30%;
        overflow-y: scroll;
    }
    input[type='text'] {
        width: 100%;
    }
    textarea {
        width: 100%;
        height: 150px;
    }
</style>

The source HTML:

<div class='user' ng-repeat='session in sessions'>
    <div class='text' ng-bind='monologues[session][0]'></div>
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
</div>

What you get by Chrome's Inspect Element:

<div class="user ng-scope" ng-repeat="session in sessions">
    <div class="text ng-binding" ng-bind="monologues[session][0]">a
    b
    c
    d
    h
    i
    j
    k
    l
    m
    n
    o
    p
    q
    r
    s
    t
    </div>
    <div class="timestamp ng-binding" ng-bind="monologues[session][1] | to_locale">6/19/2014 1:14:30 PM</div>
</div>

I've tried a few permutations, but I don't see how this is different from my minimal test case.

What should be changed so that either div.user or div.text is 30% tall?

Thanks,

Upvotes: 0

Views: 123

Answers (1)

Todd
Todd

Reputation: 5454

Here's a demo of what I mean. You should declare a height on el or parent, else the content just fills the div, which also stcks out so well b/c you're using pre-wrap

div.user{
    border: 1px solid tomato;
    height: 300px;
    overflow: auto;
    white-space: pre-wrap;
}
div.user div.text{
    height: 30%;
    border: 1px solid #bada55;
    overflow-y: scroll;
}
input[type='text'] {
    width: 100%;
}
textarea {
    width: 100%;
    height: 150px;
}

http://codepen.io/presstep/pen/pCDtx

TL;DR: without explicitly declaring a height, the browser sees no reason to do anything other than make the div large enough to hold its content.

Upvotes: 3

Related Questions