Auto scaling container with search field underneath

Print 2 reports and scale to container

HTML

<script src="https://code.jquery.com/jquery-2.1.0.js">


</script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div class="abc">
<div id="container1"></div>
</div>

<div id="container2">
  <form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
    <input autocomplete="on" class="form-control search" name="q" placeholder="Search Google" required="required" type="text">
    <button class="button" type="submit">Search</button>
  </form>
</div>

CSS

#container1 {
  width: 100%;
  height:100%;
}
.abc{
  height:100%
}

JavaScript

const authDetails = {
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}

const renderReport = function(v) {
  var report1 = v.report({
    resource: "/public/Samples/Reports/14._World_Map",
    container: "#container1",
    scale: "container",
    success: function(error) {
      renderWithUpdatedHeight($("#container1"))
    },
    error: function(error) {
      alert(error);
    }
  });

  $(window).resize(function() {
    renderWithUpdatedHeight($("#container1"));
  });

  function updateHeight($container) {
    var height = $container.find(".jrPage").height();
    var scale = $container.find(".jrPage").css("transform").match(/\d\.(\d)+/)[0];
    $container.height(height * (+scale));
  }

  var renderWithUpdatedHeight = _.debounce(updateHeight, 450);

}

visualize(authDetails, renderReport);