CSS conflict Liferay

Question

I have a css conflict when I load 2 portlets in the same Liferay page. The conflict appears when the 2 portlets cointain the same namespace in the css files.

For example if:

mycss.css of Portlet A is:

#legend {

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

and mycss.css of Portlet B is:

#legend {

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

If the portlet A is alone in the page it loads its mycss.css instead if there is also the portlet B it reads the css of the second portlet. It also happenes that the Portlet A has an element without css and the Portlet B have an element with the same namespace of the portlet A but with css. Also in this case the Portlet A read the css file of the portlet B.

I load the css in the view.jsp of the 2 portlets with:

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

or in the two different liferay-portlet.xml:

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

I have the same problem also with the js file.

P.S. The 2 portlets are imported from Netbeans

Thank you

Answer 1

CSS files are global to the plateform. There is no scope for this file. If you want to apply your css only for your portlet you have to prefix your selector with the id of the portlet (or css class wrapper that you can add in your liferay-portlet.xml file).

In portletA project add in liferay-portlet.xml the line:

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

And modify yout css like this:

.portletA #legend {

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

In portletB project add in liferay-portlet.xml the line:

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

And modify yout css like this:

.portletB #legend {

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