Search Container - how to style the alternate rows

[Smilelws2010 lwz, modifié il y a 10 années.]

Hi
I am able to display results in a search container successfully. I need to give different styling for alternate search results.
Could someone help me in this?

How can I give different css classNames to each search result row based on whether they are even/odd records?

Could any one shed some light here?

Thanks a lot
Smile

[Pankaj Kathiriya, modifié il y a 10 années.]

There is already one class portlet-section-alternate for alternate rows in search-container.

[Smilelws2010 lwz, modifié il y a 10 années.]

Yes, thank you Pankaj. I found that, but how do I apply that each result row?

Below is the sample code - which display my table nicely. I want to give styling to alternate rows.
I found that you can use classNames "portlet-section-body results-row" , "portlet-section-alternate results-row alt"; but don't know how to use it.

Could some one help.

Thanks
Smile

<liferay-ui:search-container>
	
			<liferay-ui:search-container-results results="<%= ListUtil.subList(resultList, searchContainer.getStart(), searchContainer.getEnd()) %>" total="<%= resultCount%>" />
		
			<liferay-ui:search-container-row classname="com.abc.user" escapedmodel="true" modelvar="user">
		
				<liferay-ui:search-container-column-text name="Name" valign="top">
					&lt;%= user.getNAME()  %&gt;
		
				</liferay-ui:search-container-column-text>
				
				<liferay-ui:search-container-column-text name="Email Address" valign="top">
					&lt;%= user.getEMAIL()  %&gt;
		
				</liferay-ui:search-container-column-text>
				
				<liferay-ui:search-container-column-text name="Phone" valign="top">
					&lt;%= user.getPHONE()  %&gt;
		
				</liferay-ui:search-container-column-text>
		
			</liferay-ui:search-container-row>
			
		</liferay-ui:search-container>

[Smilelws2010 lwz, modifié il y a 10 années.]

I think I did not mention this above, I need to customize styling for a specific search container on a portlet.

I want a bit different styling basically with the background color for alternate rows for a particular search container on a cusotm portlet.

[Pankaj Kathiriya, modifié il y a 10 années.]

Use css class wrapper attribute[liferay-portlet.xml] to customize your search container on portlet.

Suppose you have entry like

<css-class-wrapper>abc-portlet</css-class-wrapper>

Then in your theme's custom.css or portlet's main.css provide custom styling.

.abc-portlet .portlet-section-alternate{
 //put your custom css here
}

HTH

[Smilelws2010 lwz, modifié il y a 10 années.]

This is helpful. Thank

I will try this out and see how it goes.

Thank YOu
Smile