CODEWITHSUNDEEP
csshtml
sesc360
sesc360

Reputation: 3255

Div container causes overflow

I tried to refurbish my whole site but cannot manage to fix an overflow inside a container. I tried to make the site structure as simple as possible, but I can't find the problem:

https://jsfiddle.net/x12bkd9g/

<body class="page-header-fixed">
    <div class="page-header navbar navbar-fixed-top"></div>
    <div class="clearfix"></div>
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar">
            test
        </div>
    </div>
    <div class="page-container">
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="top-bar"></div>
                <div class="main-content">
                    <div class="row">
                        <div class="content-container-left col-md-8 class-with-no-padding">
                            <div class="toolbar">
                                <div class="portlet-body">
                                    <div class="form-group form-group-default top-bar">
                                        {!! Form::label('location', 'Position') !!}
                                        {!! Form::text('location', null, ['class' => 'form-control']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="map-container">
                                <div id="gis-map-view"></div>
                            </div>
                        </div>
                        <div class="content-container-right col-md-4 class-with-no-padding">
                            Test
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../js/tailScripts.js"></script>

</body>

The CSS:

* HEADER */
.class-with-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-header.navbar {
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  height: 60px;
  min-height: 60px;
  background-color: red;
}

.page-header-fixed .page-container {
  margin-top: 60px;
}
.page-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-left: 60px;
  background-color: #808080;
  overflow: hidden;
}

.page-sidebar-wrapper {
  background-color: #0000ff;
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 60px;
}

.page-sidebar {
  background-color: #008000;
  position: relative;
  height: 100%;
}


.page-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}

.page-content-wrapper .page-content {
}

.page-content {
  margin-top: 0px;
  padding: 0px;
  height: 100%;
}

.main-content {
  background-color: red;
  width: 100%;
}

.main-content,
.main-content > .row,
.main-content > .row > div {
  height: 100%;
  margin: 0;
}

.content-container-left {
  background-color: lightblue;
}

.content-container-right {
  background-color: yellow;
}

.top-bar {
  background-color: lightgreen;
  width: 100%;
  height: 60px;
}

.toolbar {
  background-color: #f7f8f9;
  height: 80px;
  padding: 12px;
}

.map-container {
  height: 100%;
  overflow: auto;
}

#gis-map-view {
  height: 100%;
  position: relative;
}

Why is my inner container containing a map overflowing. I am not sure, where the problem is:

enter image description here

Update I added the following to the code:

.map-container {
  height: 100%;
  overflow: auto;
  float:left;
  position: relative;
  min-height: 1px;
}

But now the map is gone: enter image description here

Update 2 After changing to 

* {
  float:left;
  position:relative;
  min-height: 1px;
}

.map-container {
  float: none !important;
  height: 100%;
}

This happened: enter image description here

Upvotes: 0

Views: 914

Answers (1)

WebWanderer
WebWanderer

Reputation: 10867

There are a couple of things going on here which will affect the overflow property of your map-container div. The most obvious and most important thing to do is make sure that your map-container's dimension properties reference either a parent property or a defined property.

Your map-container's height is defined as:

height: 100%;

..yet when moving up the parent hierarchy, whose CSS classes follow:

> "content-container-left col-md-8 class-with-no-padding"

> "row"

> "main-content"

> "page-content"

> "page-content-wrapper"

> "page-container"

> "page-header-fixed"

..we can see that the only classes offering any possibly referential height property are: row, page-content, and page-content-wrapper. All of which have a property of :height: 100%;

This will not work because there are multiple breaks in the chain of inheritance. Unfortunately, a div with a property of: height: 100%; within a div with a property of: height: auto; (which is default) will not behave as you think. Each element along the inheritance chain must have a declare height property for this to work. It should work if you add:

.page-header-fixed {
    height: 100%; /*or any pixel dimension*/
}

.page-container {
    height: 100%; /*or any pixel dimension*/
}

.main-content {
    height: 100%; /*or any pixel dimension*/
}

.content-container-left {
    height: 100%; /*or any pixel dimension*/
}

The other issue now stems from the fact that you are using a Bootstrap column class within the inheritance chain of your map-container. All Bootstrap column classes apply the properties of: float: left; position: relative; min-height: 1px;. The issue is the float: left; property. Floating an element removes the element from the DOM and adds the element after each "non-floated" element has been "loaded." This breaks the chain of inheritance. Either each parent needs to be floated (which we saw caused your map to disappear for some reason) or you need to remove the Bootstrap column class (which I suggest you do). Remove the class col-md-8 from your map-container's parent container and add:

.content-container-left {
    width: 66.6666667%;
}

Upvotes: 1

Related Questions