CSS冲突Liferay

Question

当我在同一个Liferay页面中加载2个portlet时，发生css冲突。当2个portlet在css文件中共同拥有相同的命名空间时，会出现冲突。

例如，如果：

portlet中的mycss.css是：

#legend { 

    width: 150px; 
    height: 150px; 
    bottom: 160px; 
    position: relative; 
} 

和portlet B的mycss.css是：

#legend { 

    width: 150px; 
    height: 150px; 
    bottom: 30px 
    right: 5px; 
    position: absolute; 
} 

如果portlet A是在单独该页面加载它的mycss.css，而如果还有portlet B它读取第二个portlet的css。 它也发生了Portlet A有一个没有css的元素，而Portlet B有一个与portlet A具有相同名称空间但具有css的元素。此外，在这种情况下，portlet中读取该portlet B的CSS文件

我加载的CSS在2只小门户与view.jsp的：

<script src="<%=request.getContextPath()%>/css/mycss.css"></script> 

或在两个不同的liferay的portlet .xml：

<header-portlet-css>/css/mycss.css</header-portlet-css> 

我也有与js文件相同的问题。

P.S. 2.门户被从NetBeans中

进口

谢谢

Answer 1

CSS文件是全局性的。平台。这个文件没有范围。如果你只想为你的portlet应用你的css，你必须在你的选择器前加上portlet的ID（或者你可以添加到你的liferay-portlet.xml文件中的css类包装器）。

在portletA项目的Liferay-portlet.xml中添加一行：

<css-class-wrapper>portletA</css-class-wrapper> 

并修改YOUT CSS是这样的：

.portletA #legend { 

    width: 150px; 
    height: 150px; 
    bottom: 160px; 
    position: relative; 
} 

在portletB项目的Liferay-portlet.xml中添加行：

<css-class-wrapper>portletB</css-class-wrapper> 

并修改YOUT CSS是这样的：

.portletB #legend { 

    width: 150px; 
    height: 150px; 
    bottom: 160px; 
    position: relative; 
}