title: Footer Visible only after resizing
body: <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>