Help - Search - Members - Calendar
Full Version: Trouble with overflow and child-parent DIV
HTMLHelp Forums > Web Authoring > Web Site Functionality
nhunt100
I'm building a basic Gantt chart to fit into the top of an events page. The space it fits into is about 1000x500. This chart will have the dates across the top and the events below them, represented as bars.
This is what it looks like so far:
Image 1 - What it looks like at the start

So the way it works is that the gantt_content div holds everything including:
The blue, red and yellow bars
The grey area below
The little blue events div with "Campaign Name" in it

I have set overflow-x to scroll on this and overflow-y to hidden. This ensures that as you use the scroller on the bottom, all of the content moves together. i.e. the days at the top move with the events that are running below them.

My problem is with the overflow-y on the right.
Image 2 - The problem

I have a child div gantt_holder which holds the grey area gantt_all_events, a large area onto which the gantt_event can be added. I have overflow-x to hidden and overflow-y to scroll on gantt_holder. This means that the content within the div can move up and down but the dates can stay up the top. My problem is, when I use the scroll on the bottom from gantt_content, it moves the scroll from gantt_holder across the screen.


What I'm looking to do is have the overflow-x work on all of the parent's contents and the overflow-y only work on gantt_holder so that the scroll bar stays on the far right of the parent. The code below demonstrates the exact problem I'm having.

Any advice would be really appreciated and thank you in advance.

CSS:
CODE
.gantt_here{
    width: 100%;
    height: 500px;
    border: 1px solid black;
}

.gantt_container{
    position:relative;
    height:100%;
    width:100%
}

.gantt_head {
    background-color:#0086b3;
    height:3px;
    border-radius: 3px 3px 0px 0px;
}

.gantt_header {
    background-color:#e4e7e7;
    height: 15px;
}

.gantt_content {
    overflow-x:scroll;
    overflow-y:hidden;
    height:calc(100% - 18px);
    width:100%;
    position:absolute;
}

.gantt_dates {
    width:2000px;
    float:left;
}

.gantt_years {
    background-color:blue;
    height:25px;
}

.gantt_months {
    background-color:red;
    height:25px;
}

.gantt_days {
    background-color:yellow;
    height:25px;
}

.gantt_holder {
    height: calc(100vh - 75px);
    width:100%;
    overflow:scroll;
    background: silver;
}
                                
.gantt_all_events {
    height: 2000px;
    width: 2000px;
    float:left;
}


.gantt_event {
    background-color:#0086b3;
    width:200px;
    height:24px;
    border-radius:
    3px;position:relative;
    left:350px;
    margin:3px;
}


HTML:
CODE
<div class="gantt_here" >
    <div class="gantt_container" >
        <!-- header -->
        <div class="gantt_head" />
        <div class="gantt_header" />
                                    
        <!-- gantt display -->
        <div class="gantt_content" >
            <div class="gantt_dates" >
                <div class="gantt_years" >
                    Year
                </div>
                <div class="gantt_months" >
                    Month
                </div>
                <div class="gantt_days" >
                    Day
                </div>
            </div>
            <div class="gantt_holder" >
                <div class="gantt_all_events" >
                    <div class="gantt_event" >
                        Campaign Name
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
pandy
What if you remove the styling for .gannt_dates? Why is the float there?

CODE
.gantt_dates {
    /*  width:2000px; */
    /* float:left; */
}
nhunt100
QUOTE(pandy @ Mar 23 2016, 05:39 AM) *

What if you remove the styling for .gannt_dates? Why is the float there?

CODE
.gantt_dates {
    /*  width:2000px; */
    /* float:left; */
}



Sorry the float was just there from an old piece of code and actually has little effect.

The reason I cant get rid of the styling for gantt_dates is because the date bars need to be the same width as gantt_all_events so that the days within those colored bars can stay above the events in the grey area as you use the horizontal scroll bar.
pandy
Ah, you want columns? Then why not use a table? AFAIK browsers still don't support a scrolling TBODY, but there are many ways around that. I like this one.
https://www.tjvantoll.com/2012/11/10/creati...rollable-tbody/
nhunt100
QUOTE(pandy @ Mar 23 2016, 08:57 AM) *

Ah, you want columns? Then why not use a table? AFAIK browsers still don't support a scrolling TBODY, but there are many ways around that. I like this one.
https://www.tjvantoll.com/2012/11/10/creati...rollable-tbody/


Yeah, so we were planning on having it as a table alright but we found that it was getting incredibly complicated when it came to adding in the events, making it more dynamic etc.

I'll look into a scrollable tbody, even if it means having to change a few things. I'd say well just need to put up with it being complicated.

Thanks Pandy, much appreciated
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.