Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Native scrollbars inside absolutely positioned element

Tags:

css

I'm having some issues with scrollbars on element with position: absolute. The behavior I'm experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it's content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it's content and resizing the box instead (which is in my opinion correct, since the box doesn't have width defined). Is there any solution to make this look the same in those 4 browsers?

JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/

Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to "scroll" however that shows scrollbar always which is not desired

Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame

http://jsfiddle.net/Kukkimonsuta/GaMD7/15/

function updateAutoScroll(element) {
    var $element = $(element);

    if (element.scrollHeight > element.clientHeight) 
        $element.css("overflow-y", "scroll");
    else 
        $element.css("overflow-y", "auto");
}
like image 926
Lukáš Novotný Avatar asked Sep 10 '12 13:09

Lukáš Novotný


2 Answers

The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.

http://jsfiddle.net/iambriansreed/mYuQx/

$(function(){

    // loops through each container
    $('.container').each(function(){                
        if(this.scrollHeight>this.clientHeight)
            $(this).children().wrapAll(
                '<div style="padding-right:'+scrollbarWidth()+'px;"/>'
            );
    });

    // gets the browsers current scrollbar width
    function scrollbarWidth() {
        var parent, child, width;    
        if(width===undefined) {
            parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
            child = parent.children();
            width = child.innerWidth() - 
                child.height(99).innerWidth();
            parent.remove();
        }    
        return width;
    };

});
like image 120
iambriansreed Avatar answered Sep 23 '22 03:09

iambriansreed


Add overflow-y: scroll; to .container.two

.container.two {
    top: 250px;
    overflow-y: scroll;
}

Refer LIVE DEMO

UPDATE:

If you are comfortable, you can use text-overflow: ellipsis; and replace &nbsp; to actual space

like image 38
Siva Charan Avatar answered Sep 21 '22 03:09

Siva Charan