2016-05-09 104 views
0

當我在同一個Liferay頁面中加載2個portlet時,發生css衝突。當2個portlet在css文件中共同擁有相同的命名空間時,會出現衝突。CSS衝突Liferay

例如,如果:

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中

進口

謝謝

+2

請注意,使用這樣的HTML標識不是正確的portlet風格:我必須保證每個HTML頁面都是唯一的,這不是你的情況。 –

+0

請原諒我上面沒有看到的自動更正。閱讀「ID」,而不是「我願意」 –

+0

是的,我知道它,但我不得不導入這些項目... – uroti

回答

3

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

我該怎麼做? – uroti

+0

我編輯了我的答案添加了一個例子 – fabballe

+0

謝謝,看起來效果很好。 – uroti