Apply overflow hidden to an absolute positioned container

Question

I have a div that contains some info like a chart. Let's call it the container. Within the container I have two other divs. One div is a header with dates, the other div is the data corresponding to those dates. I want to have the header/dates div to be positioned fixed. So it will follow the user as they scroll down. The problem I am having it that it removes the overflow: hidden css style because of it's position. Is there a way to still retain the overflow: hidden with a div styled with position: fixed or position: absolute?

Here is a simple JSFiddle example. Remove the CSS style position: fixed from .titleSection-right to see the desired cut off point

https://jsfiddle.net/2m16rtjp/1/

score 0 · Accepted Answer · answered Aug 01 '16 at 13:01

for overflow:hidden on .titleSection-right to work you need to set a fixed width on this element . it's width, in this case, needs to be equal to the parents width, respectively .rightSide which has a percentage width. so i added this code in your JS

var maxWidth = $(".rightSide").width()
$(".titleSection-right").width(maxWidth)

this way , the .titleSection-right will have the width of .rightSide

see here : jsfiddle

or snippet below

$(function() {

    var maxWidth = $(".rightSide").width()
        $(".titleSection-right").width(maxWidth)
    var dates = ['7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', 
               '7/6/2016', '7/7/2016', '7/8/2016', '7/9/2016', '7/1/2016', 
               '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016'];
    var employees = ['Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 
                    'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', ];
    var employeeProjections = ['Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
                              'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
                              'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
                              'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
                              'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 
                              'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll'];
    
    var container = $('#container');
    var leftSide = $('.leftSide');
    var rightSide = $('.rightSide');
    var titleSectionLeft = $('.titleSection-left');
    var titleSectionRight = $('.titleSection-right');
    var resources = $('.resources');
    var projections = $('.projections');
    
    
    
    createHeaderDates();
    createResources();
    createProjections(16);
    
    function createHeaderDates() {
        dates.forEach((date) => {
            var dateDiv = $('<div class="date">' + date + '</div>');
            titleSectionRight.append(dateDiv);
        });
    }
    
    function createResources() {
        employees.forEach((employee) => {
            var employeeDiv = $('<div class="employee">' + employee + '</div>');
            resources.append(employeeDiv);
        });
    }
    
    function createProjections(numOfWeeks) {
        employees.forEach((employee) => {
            var projectionRow = $('<div class="projectionRow"></div>');
            for(var i = 0; i < numOfWeeks; i++){
                var projectionDiv = $('<div class="projection">' + employeeProjections[i] + '</div>');
                projectionRow.append(projectionDiv);
            }
            projections.append(projectionRow);
        });     
    }
});

body {
    background-color: azure;
}
#container {
    display: block;
    height: 8000px;
    width: 800px;
    background-color: darkolivegreen;
    margin: 0 auto;
}
.leftSide {
    width: 14%;
    display: inline-block;
    background-color: forestgreen;
    vertical-align: top;
}
.rightSide {
    width: 85%;
    display: inline-block;
    background-color: cadetblue;
    overflow: auto;
}
.titleSection-left {
    display: inline-block;
    width: 100%;
}
.employee {
    height: 30px;
}
.titleSection-right {
    background-color: royalblue;
    display: inline-block;
    white-space: nowrap;
    position: fixed;
    overflow:hidden;
}
.projectionRow {
    white-space: nowrap;
    height: 30px;
}
.projections {
    display: inline-block;
}
.projection {
    display: inline-block;
    border: 1px solid black;
    margin-right: 10px;
}
.date {
    margin-right: 10px;
    display: inline-block;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div id='container'>
            <div class='leftSide'>
                <div class='titleSection-left'>
                    <label>Resource</label>
                </div>
                <div class='resources'></div>
            </div>
            <div class='rightSide'>
                <div class='titleSection-right'></div>
                <div class='projections'></div>
            </div>
        </div>
    </body>

Apply overflow hidden to an absolute positioned container

1 Answers1