Footer Visible only after resizing
<p>I am creating a footer that should be fixed on the bottom of the page. The footer is creating but visible only after resizing the window. Below is my code</p>

<pre><code>&lt;div id="footerContainerLexApp"&gt;
  &lt;div id="footerTitleBar" class="bold footerTitleBar"&gt;
    &lt;div&gt;
      &lt;div class="form-group-margin"&gt;
        &lt;button type="button" class="btn-primary uiBMarginRight btn btn-root" style="min-width: 100px;"&gt;Save&lt;/button&gt;
        &lt;button type="button" class="btn-primary uiBMarginRight btn btn-root" style="min-width: 100px;"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.footerTitleBar {
  position: relative;
  padding: 0 0 20px 20px;
}
</code></pre>

<p>There is also a function that is been called every time the window is resized.</p>

<pre><code>onResize: function () {
  if(lexAppWidget.jqueryLoaded) {
    var heightToBeReduced = 200;
    if($("#tabviewMainContainerLexApp").is(":visible")) {
      heightToBeReduced = 200;
    }
    var height = top &amp;&amp; top.innerHeight ? top.innerHeight - heightToBeReduced : 800;
    if(widget.containerScroller) {
      widget.containerScroller.setSize({ height: height });
    }
    if($(".commonGridTable").length != 0) {
      for(var i = 0; i &lt; $(".commonGridTable").length; i++) {
        if($($(".commonGridTable")[i]).attr('id') &amp;&amp; $("#" + $($(".commonGridTable")[i]).attr('id').split("idCommonGridTable")[1]).is(':visible')) {
          var containerWidth = widget.getElement("#" + $($(".commonGridTable")[i]).attr('id').split("idCommonGridTable")[1]).getSize().width
          var widgetWidthonResize = (containerWidth - (0.02 * containerWidth));
          $($(".commonGridTable")[i]).setGridWidth(widgetWidthonResize);
        }
      }
    }
  }
}
</code></pre>