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; 
}