An awkward case of browser scroll

Context 

NextReports Server contains a dashboard were a set of widgets like tables, charts and  many others can be shown. Tables can contain sometimes a lot of data and a pagination & a scroll bar is used in such cases. If many widgets are inside a dashboard, then a browser scroll will be visible.


Problem

A table with pagination & scroll bar will make the entire browser to have a scroll even if there is no need of it. This scroll bar height is as if the table widget is fully rendered with no scroll at all.

 The dashboard should look instead as the following:

Investigation

Looking with firebug inspection to html & css a div element is seen: 

<div style="position: absolute; left: -9999px; width: 1px; height: 1px;">
  <input id="ide19focus" type="hidden" value="" name="ide19focus">
  <input type="submit">
</div>

This is not created by developers. Because Wicket framework is used, this html code is added by Pagination Navigator and it represents a non visible submit button used by navigation links. By commenting css attributes of this div style it can be seen the normal functionality.


Solution

The entire widget is contained inside a div with a class like: 

<div class="tableWidgetView">

 To make our entire dashboard look ok, tableWidgetView class must contain in addition a single css attribute:  

          position: relative;  

That's why because the problematic div (found inside tableWidgetView div) has an absolute position which is referring its parent. Simple solution, but hard to find.