Forum

Accueil » Liferay Portal » English » 3. Development

Vue combinée Vue Plate Arborescence
Sujets [ Précédent | Suivant ]
toggle
Smilelws2010 lwz
Search Container - how to style the alternate rows
5 novembre 2013 09:16
Réponse

Smilelws2010 lwz

Rang: Regular Member

Publications: 157

Date d'inscription: 16 décembre 2010

Publications Récentes

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
RE: Search Container - how to style the alternate rows
5 novembre 2013 22:51
Réponse

Pankaj Kathiriya

Rang: Liferay Master

Publications: 665

Date d'inscription: 4 août 2010

Publications Récentes

There is already one class portlet-section-alternate for alternate rows in search-container.
Smilelws2010 lwz
RE: Search Container - how to style the alternate rows
6 novembre 2013 06:25
Réponse

Smilelws2010 lwz

Rang: Regular Member

Publications: 157

Date d'inscription: 16 décembre 2010

Publications Récentes

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


 1<liferay-ui:search-container >
 2   
 3            <liferay-ui:search-container-results
 4                results="<%= ListUtil.subList(resultList, searchContainer.getStart(), searchContainer.getEnd()) %>"
 5                total="<%= resultCount%>"
 6            />
 7       
 8            <liferay-ui:search-container-row
 9                className="com.abc.user"
10                escapedModel="true"
11                modelVar="user"
12            >
13       
14                <liferay-ui:search-container-column-text
15                    name="Name"
16                    valign="top"
17                >
18                    <%= user.getNAME()  %>
19       
20                </liferay-ui:search-container-column-text>
21               
22                <liferay-ui:search-container-column-text
23                    name="Email Address"
24                    valign="top"
25                >
26                    <%= user.getEMAIL()  %>
27       
28                </liferay-ui:search-container-column-text>
29               
30                <liferay-ui:search-container-column-text
31                    name="Phone"
32                    valign="top"
33                >
34                    <%= user.getPHONE()  %>
35       
36                </liferay-ui:search-container-column-text>
37       
38            </liferay-ui:search-container-row>
39            
40        </liferay-ui:search-container>
Smilelws2010 lwz
RE: Search Container - how to style the alternate rows
6 novembre 2013 06:41
Réponse

Smilelws2010 lwz

Rang: Regular Member

Publications: 157

Date d'inscription: 16 décembre 2010

Publications Récentes

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
RE: Search Container - how to style the alternate rows
7 novembre 2013 21:30
Réponse

Pankaj Kathiriya

Rang: Liferay Master

Publications: 665

Date d'inscription: 4 août 2010

Publications Récentes

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

Suppose you have entry like
1<css-class-wrapper>abc-portlet</css-class-wrapper>


Then in your theme's custom.css or portlet's main.css provide custom styling.
1
2.abc-portlet .portlet-section-alternate{
3 //put your custom css here
4}


HTH
Smilelws2010 lwz
RE: Search Container - how to style the alternate rows
8 novembre 2013 08:15
Réponse

Smilelws2010 lwz

Rang: Regular Member

Publications: 157

Date d'inscription: 16 décembre 2010

Publications Récentes

This is helpful. Thank

I will try this out and see how it goes.

Thank YOu
Smile