1. Home
  2. Development
  3. RE: Liferay 7.2 - Change CSS for Search Container

RE: Liferay 7.2 - Change CSS for Search Container

Fabio Carvalho, modified 6 Years ago.
Liferay 7.2 - Change CSS for Search Container
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
Hi,

I have the following Search Container on my view.jsp:
<liferay-portlet:renderurl varimpl="iteratorURL">
&nbsp; &nbsp; <portlet:param name="mvcPath" value="view.jsp" />
</liferay-portlet:renderurl>

&lt;% List<myobject> myObjects = (List<myobject>) request.getAttribute("objects-list"); %&gt;
<liferay-ui:search-container cssclass="search-container" delta="10" deltaconfigurable="true" emptyresultsmessage="Empty results!" total="<%= myObjects.size() %>">
    <liferay-ui:search-container-results results="<%= ListUtil.subList(myObjects, searchContainer.getStart(), searchContainer.getEnd()) %>" />
&nbsp; &nbsp; <liferay-ui:search-container-row classname="MyObject" modelvar="myObject">
&nbsp; &nbsp;     <liferay-ui:search-container-column-image name="Avatar" src="${myObject.avatar}" />
&nbsp; &nbsp; &nbsp; &nbsp; <liferay-ui:search-container-column-text name="Name" property="name" />
&nbsp; &nbsp; </liferay-ui:search-container-row>
&nbsp; &nbsp; <liferay-ui:search-iterator />
</liferay-ui:search-container></myobject></myobject>


And in my META-INF -> resources -> css I have the following main.scss file:
.search-container thead {
&nbsp; &nbsp;&nbsp; &nbsp;display: none;
}


I am successfully hiding the thead of the Search Container, but for some reason I can't change anything else. What would be the correct way to edit the appearance of the Search Container?
thumbnail
Mohammed Yasin, modified 6 Years ago.
RE: Liferay 7.2 - Change CSS for Search Container
Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts
HI,
 I am successfully hiding the thead of the Search Container, but for some reason I can't change anything else. What would be the correct way to edit the appearance of the Search Container?
What exactly your not able to change ?
Fabio Carvalho, modified 6 Years ago.
RE: Liferay 7.2 - Change CSS for Search Container
Junior Member Posts: 81 Join Date: 6/25/19 Recent Posts
Hi Mohammed,

I was not able to change the background color of the td elements. I noticed that my main.scss was opening the text editor of my PC. I changed to main.css and the file is opening in the IDE now. Looks now that my css changes are taking effect, could be a problem loading the scss file? I have the following working on my css:
.search-container thead {
&nbsp;&nbsp; &nbsp;display: none;
}

.search-container td {
&nbsp;&nbsp; &nbsp;border: none;
}

.search-container td:first-child {
&nbsp;&nbsp; &nbsp;width: 5%;
}

​​​​​​​.search-container td:last-child {
&nbsp;&nbsp; &nbsp;width: 95%;
}