title: Fullscreen bootstrap card with highcharts (100% height)
body: <p>I have several (bootstrap) cards where I would like to have the opportunity to show this fullscreen. Highcharts charts are present in these cards. The problem is that the height of the highcharts does not adapt when you are going in full screen mode. </p>
  
  <p>A while ago I asked the same question with bootstrap panels and then "daniel_s" made <a href="https://jsfiddle.net/jx46s9gn/" rel="nofollow noreferrer">this</a> example for panels. Only now I have added a number of columns at the bottom and it has been converted from panels to cards. Unfortunately the example is not working anymore.</p>
  
  <p>Is there a possibility to automatically adjust the scaling of the highcharts so that the ratio (columns at the bottom and header) remains the same as in <a href="http://jsfiddle.net/Pension007/8pe2zhk5/1/" rel="nofollow noreferrer">this</a> example?</p>
  
  <p>In addition, I would also like to know how I get the header the text and icons on one line. So that the text is on the left and the icons are on the right.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var charts = [];
    var chart1Info = {
      containerId: 'container',
      definition: {
        title: {
          text: 'Solar Employment Growth by Sector, 2010-2016'
        },
        subtitle: {
          text: 'Source: thesolarfoundation.com'
        },
        yAxis: {
          title: {
            text: 'Number of Employees'
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: [{
          name: 'Installation',
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
          name: 'Manufacturing',
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
          name: 'Sales &amp; Distribution',
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
          name: 'Project Development',
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
          name: 'Other',
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }]
      }
    };
    var chart2Info = {
      containerId: 'container2',
      definition: {
        title: {
          text: 'Chart2 Title'
        },
        subtitle: {
          text: 'Source: thesolarfoundation.com'
        },
        yAxis: {
          title: {
            text: 'Number of Employees'
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: [{
          name: 'Installation',
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
          name: 'Manufacturing',
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
          name: 'Sales &amp; Distribution',
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
          name: 'Project Development',
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
          name: 'Other',
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }]
      }
    };
  
    function drawChart(chartInfo) {
      // Properties that vary by chart should be defined in chartInfo
      // Any properties that are the same for all charts are added here 
      chartInfo.responsive = {
        rules: [{
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              layout: 'horizontal',
              align: 'center',
              verticalAlign: 'bottom'
            }
          }
        }]
      };
  
      if (chartInfo == chart1Info) {
        charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
      } else {
        charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
      }
  
    }
    //Toggle fullscreen
    $(".fullscreen-btn").click(function(e) {
      e.preventDefault();
  
      var $this = $(this);
      $this.children('i')
        .toggleClass('fa-expand')
        .toggleClass('fa-arrows-alt');
      console.log($(this).closest('.card'))
      $(this).closest('.card').toggleClass('panel-fullscreen');
      var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
      console.log($this.id, chartInfo);
      drawChart(chartInfo);
    });
  
    drawChart(chart1Info);
    drawChart(chart2Info);
  
  
  
    // Export buttons
    $('#png').click(function() {
      charts[0].exportChart();
    });
  
    $('#jpeg').click(function() {
      charts[0].exportChart({
        type: 'jpeg',
        filename: 'my-pdf'
      });
    });
  
    $('#pdf').click(function() {
      charts[0].exportChart({
        type: 'pdf',
        filename: 'my-pdf'
      });
    });
  
    $('#svg').click(function() {
      charts[0].exportChart({
        type: 'SVG',
        filename: 'my-svg'
      });
    });
  
    document.getElementById('csv').onclick = () =&gt; {
      charts[0].downloadCSV()
    };
  
    document.getElementById('xls').onclick = () =&gt; {
      charts[0].downloadXLS()
    }
  
    $('#print').click(function() {
      charts[0].print();
    });
  
  
    $('#png2').click(function() {
      charts[1].exportChart();
    });
  
    $('#jpeg2').click(function() {
      charts[1].exportChart({
        type: 'jpeg',
        filename: 'my-pdf'
      });
    });
  
    $('#pdf2').click(function() {
      charts[1].exportChart({
        type: 'pdf',
        filename: 'my-pdf'
      });
    });
  
    $('#svg2').click(function() {
      charts[1].exportChart({
        type: 'SVG',
        filename: 'my-svg'
      });
    });
  
    document.getElementById('csv2').onclick = () =&gt; {
      charts[1].downloadCSV()
    };
  
    document.getElementById('xls2').onclick = () =&gt; {
      charts[1].downloadXLS()
    }
  
    $('#print2').click(function() {
      charts[1].print();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-actions {
    margin-top: -20px;
    margin-bottom: 0;
    text-align: right;
  }
  
  .panel-actions a {
    color: #333;
  }
  
  .panel-fullscreen {
    display: block;
    z-index: 9999;
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
  }
  
  .card_border {
    border: solid 0.75px #fa7921;
  }
  
  .card_border2 {
    border: solid 2px #fa7921;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"&gt;
  &lt;script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  &lt;!------ Include the above in your HEAD tag ----------&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-lg-3"&gt;
        &lt;div class="card with-margin card_shadow card_border rounded"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);"&gt;
              &lt;h3&gt;Panel title
                &lt;ul class="list-inline panel-actions float-right"&gt;
                  &lt;li class="list-inline-item"&gt;&lt;a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"&gt;&lt;i class="fas fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="btn-group"&gt;
                    &lt;button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        &lt;span class="fas fa-list-ul"&gt;&lt;/span&gt;&lt;/button&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="print"&gt;Print&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="separator" class="divider dropdown-item"&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="png"&gt;Download PNG&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="jpeg"&gt;Download JPEG&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="pdf"&gt;Download PDF&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="svg"&gt;Download SVG&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="separator" class="divider dropdown-item"&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="csv"&gt;Download CSV&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="xls"&gt;Download XLS&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/ul&gt;
              &lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="card-body border-top-0 border-bottom-0 card_border2"&gt;
                &lt;div id="container"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row bg-white justify-content-center card_border"&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Saves
                &lt;p class="h4"&gt;1700000&lt;/p&gt;
                &lt;p class="text-danger margin h6"&gt;-2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-md-6 col-lg-3"&gt;
        &lt;div class="card with-margin card_shadow card_border rounded"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921);"&gt;
              &lt;h3&gt;Panel title
                &lt;ul class="list-inline panel-actions float-right"&gt;
                  &lt;li class="list-inline-item"&gt;&lt;a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"&gt;&lt;i class="fas fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="btn-group"&gt;
                    &lt;button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        &lt;span class="fas fa-list-ul"&gt;&lt;/span&gt;&lt;/button&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="print2"&gt;Print&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="separator" class="divider dropdown-item"&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="png2"&gt;Download PNG&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="jpeg2"&gt;Download JPEG&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="pdf2"&gt;Download PDF&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="svg2"&gt;Download SVG&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="separator" class="divider dropdown-item"&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="csv2"&gt;Download CSV&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-item"&gt;&lt;a href="#" id="xls2"&gt;Download XLS&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/ul&gt;
              &lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="card-body border-top-0 border-bottom-0 card_border2"&gt;
                &lt;div id="container2"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row bg-white justify-content-center card_border"&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Saves
                &lt;p class="h4"&gt;1700000&lt;/p&gt;
                &lt;p class="text-danger margin h6"&gt;-2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm text-center card_border2"&gt;
                &lt;br&gt; Likes
                &lt;h4&gt;1700000&lt;/h4&gt;
                &lt;p class="text-success margin"&gt;2.1%&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hopefully someone can help me to solve this problem. Thank you in advance!!</p>