CODEWITHSUNDEEP
csshtmloverflow
Adam Batkin
Adam Batkin

Reputation: 53034

Nested divs, overflow scroll on the outer one, inner one is truncated

I have some nested <div>s. The outer <div> has overflow-x: scroll, and the inner one has long text (that I don't want to wrap). The problem is that the "inner" <div>s don't actually expand into the scrolling area. For example, if I had a click event bound to each inner <div>, that event wouldn't fire if you scrolled to the right and clicked anywhere over there. In my sample, the red areas are part of the inner <div>s and the blue areas aren't (so a click anywhere in the blue areas wouldn't fire).

(fiddle)

Sample HTML:

<div class="outer">
    <div class="inner">one long element right here</div>
    <div class="inner">two long element right here</div>
    <div class="inner">three long element right here</div>
</div>

And some simple CSS:

.outer {
    width: 15ex;
    overflow-x: scroll;
    background-color: blue;
}

.inner {
    white-space: nowrap;
    background-color: red;
}

(colors are for illustrative purposes)

Upvotes: 1

Views: 1788

Answers (2)

apaul
apaul

Reputation: 16180

Obligatory jQuery answer:

Working Example

$(function () {
    $('.outer').scroll(function () {
        $('.inner').width($('.outer').width() + $('.outer').scrollLeft());
    });

    $('.inner').click(function () {
        $(this).css('background', 'green');
    });
});

Upvotes: 0

kalley
kalley

Reputation: 18472

I only tried this in Chrome, but it worked:

.inner {
    background-color: red;
    white-space: nowrap;
    display: table-row;
}

http://jsfiddle.net/tGkdn/5/

I almost just gave you a javascript fix, which I'll post here just in case that is not cross-browser.

var inner = document.querySelectorAll('.inner');
for ( var i = 0, l = inner.length; i < l; ++i ) {
    inner[i].style.width = inner[i].parentNode.scrollWidth + 'px';
}

Upvotes: 4

Related Questions