Configuring Open Data home page results in overlapping widgets at the top of the page

Description

After configuring the home page of an Open Data site, upon viewing the site, the widgets appear to overlap towards the top of the page. This overlap is not seen in the 'configuration' mode, but becomes apparent in the 'view' mode when using Chrome or Firefox.

Cause

This problem is due to the default configuration interface for creating an Open Data home page, as it is defined by a style sheet that includes page height limitations. If this page height limitation is exceeded, widgets appear to be overlapping at the top of the page. This height limitation for the main body of an Open Data page becomes apparent after one of the following:

• Adding more than eight rows of widgets
• Using the default height of the widget, or
• Having widgets that cause the height to be exceeded

The default height of a widget, when added to the page, corresponds to a total of 2 rows in the style sheet, or 208 pixels. The Open Data style sheet includes a total of 16 rows which corresponds to 1666 pixels total.

Note:
The style sheet that that defines the interface for Open Data home page configuration can be viewed from the following link: application.css

Solution or Workaround

1. In the Open Data page configuration mode, design the page using the Wizard tabs.
   
2. Once ready to correct the overlapping issue, click the CODE tab under 'Define Layout'.
   
   

   Warning:
   If the HTML is manually edited through CODE mode, the WIZARD mode cannot then be used.

   
   
3. On Line 1 is the total allowed height for the main body of the web page in pixels, between the header and footer.
   
   
   Increase the pixel (px) value to allow room to reposition the widgets. Altering this value increases the page size, but may still result in the overlapping of widgets.
4. Scroll down to the widgets that are having the overlapping issues. These should correspond to widgets in rows over 'row-16'.
   
   
   
5. Remove the row text from the line and then add style="top:1666px" inside the closing bracket.
   
   

   Note:
   It may be necessary to play around with the values for pixel heights to get the proper alignment.

   
   
6. Scroll to the bottom of the page, save the changes and view the page to see if the overlap has been removed.