Highchart overflows modal window

Question

In this plunk I have a Highcharts chart in an Angular UI modal window. The modal window has height and width declared in a class, and the chart is supposed to strech to width/height however it overflows at the bottom (possibly because it has two divs on top with text). How to make it fit?

Note: the chart has to be below the text divs, not as background.

HTML:

<script type="text/ng-template" id="myModalContent.html">
     <div>some text</div>
     <div>more text</div>
    <div id="container" style="min-width: 300px; width:100%; height:100%;">    </div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

Javascript:

var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal,$timeout) {

      var modalInstance;
      $scope.open = function () {
        modalInstance = $uibModal.open({
              animation: false,
              windowClass: 'the-modal',
              templateUrl: 'myModalContent.html'
            });

            $timeout(function(){
                plotChart();
            });

        };

        var plotChart = function(){

              $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });

        };

    });

Answer 1

That is right, the presence of child div elements and setting height:100%; for chart container cause overflow for the parent container. One option to fix this issue is to use CSS3's Flexible Box Layout Module, another options are listed in this answer.

Using CSS3's Flexible Box Layout Module

Enable a Flexbox Layout for a parent container (modal dialog)

.the-modal .modal-content{ display: flex; flex-direction: column; }

and then set chart container to occupy the remaining space via flex-grow, in your case replace:

<div id="container" style="min-width: 300px; width:100%; height:100%;"></div>

with

<div id="container" style="min-width: 300px; width:100%; flex-grow: 1;"></div>

Updated plunker