BIEE的Dashboard在引用列时,自动为列加上了边框,便于用户对各列进行显示上的区分,但在布局上却会因为浏览器不同而带来一些其他的问题。
比如在chrome中为Dashboard的排版布局,看起来是整齐的,但使用firefox打开后却发现因为引用内容在不同浏览器的展示效果,而使得整个Dashboard的排版也变得参差不齐了。
显示问题
Chrome中排版布局可能如下图:
而使用火狐打开时,因为其它原因,则变成了:
解决方法
为解决这种情况,可以考虑将Dashboard的底色也设置为"白色",同时取消列的"左、右、下"三个边框(保留上边框是为了显示美观,同时便于区分显示内容)。
最终显示效果如下。
修改Dashboard样式后Chrome中显示效果如下图:
修改Dashboard样式后火狐显示效果如下图:
可见其实内容在不同浏览器时发生变化,布局也不会变得突兀。
修改Dashboard样式方法
Dashboard样式控制主要在
%BIEE_HOME%\user_projects\domains\bifoundation_domain\servers\AdminServer\tmp\_WL_user\analytics_11.1.1\silp1v\war\res\s_FusionFX\b_mozilla_4的portalcontent.css文件中。
(如有必要,可以找到原始war包,位于%BIEE_HOME%\Oracle_BI1\bifoundation\jee,修改初始源文件)
找到如下内容:
.DashboardPageContentDiv{background-color:#EFF7FF;padding:4px 4px 4px 0;position:relative;}
.SectionTable{margin-bottom:2px;margin-left:2px;width:100%;border-width:1px;border-style:solid;border-color:#C2C7D3;border-radius:6px;-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #B3B7BB;-webkit-box-shadow:2px 2px 2px #B3B7BB;box-shadow:2px 2px 2px #B3B7BB;background-color:#FFF;background-image:url(dashboard_section_background.gif);background-repeat:repeat-x;background-position:top left;}
.AccordionPaneHeadRoundCorner .RoundCornerLeft{background-image:url(section_roundedcorner_left.gif);}
.AccordionPaneHeadRoundCorner .RoundCornerRight{background-image:url(section_roundedcorner_right.gif);}
.AccordionPaneHead,.AccordionPaneHeadContent{background-image:url(dashboard_section_background.gif);}
.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerLeft{background-image:url(section_roundedcorner_left.gif);}
.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerRight{background-image:url(section_roundedcorner_right.gif);}
.AccordionPaneCollapsed .AccordionPaneHead,.AccordionPaneCollapsed .AccordionPaneHeadContent{background-color:#FFF;background-image:url(dashboard_section_background.gif);}
建议修改为:
.DashboardPageContentDiv{background-color:#FFFFFF;padding:4px 4px 4px 0;position:relative;}/*修改背景颜色*/
/*修改边框*/
.SectionTable{margin-bottom:2px;margin-left:2px;width:100%;border-width:1px;border-style:none;border-color:#C2C7D3;border-radius:6px;-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #FFF;-webkit-box-shadow:2px 2px 2px #FFF;box-shadow:2px 2px 2px #FFF;background-color:#FFF;background-image:url(dashboard_section_background.gif);background-repeat:repeat-x;background-position:top left;}
.AccordionPaneHeadRoundCorner .RoundCornerLeft{background-color:#FFF;}
.AccordionPaneHeadRoundCorner .RoundCornerRight{background-color:#FFF;}
.AccordionPaneHead,.AccordionPaneHeadContent{background-image:url(dashboard_section_background.gif);}
.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerLeft{background-color:#FFF;}
.AccordionPaneCollapsed .AccordionPaneHeadRoundCorner .RoundCornerRight{background-color:#FFF;}
.AccordionPaneCollapsed .AccordionPaneHead,.AccordionPaneCollapsed .AccordionPaneHeadContent{background-color:#FFF;background-image:url(dashboard_section_background.gif);}
注意代码中红色部分的相应调整,可根据需要在进行其它修改。