ArcGIS Online

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

【相关信息】
Article ID: 44165
Bug Id: N/A
Software:
ArcGIS Online Current
Platforms: N/A

【问题描述】
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.

【原因】
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.

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

1 个回复

EsriSupport

【解决方案】
It is not possible to alter the Open Data style sheet, as it defines the template interface for all Open Data home page configurations. However, the style sheet can be overridden by altering the underlying HTML using the CODE mode, by following the steps below:

In the Open Data page configuration mode, design the page using the Wizard tabs.
Once ready to correct the overlapping issue, click the CODE tab under 'Define Layout'.
On Line 1 is the total allowed height for the main body of the web page in pixels, between the header and footer.
Scroll down to the widgets that are having the overlapping issues. These should correspond to widgets in rows over 'row-16'.
Remove the row text from the line and then add style="top:1666px" inside the closing bracket.
Scroll to the bottom of the page, save the changes and view the page to see if the overlap has been removed.