2 different listviews on one page with different k-listview-content styles

1 Answer 29 Views
ListView
Andy
Top achievements
Rank 1
Iron
Andy asked on 04 Mar 2022, 03:01 AM

I have 2 listviews on a single page.

On one the items are displayed in a single column... one per row.

On the second the items are displayed as a grid.  Per the ListView template demo this is done by overriding the k-listview-content class:

.k-listview-content { display: grid; grid-template-columns: repeat(auto-fill, 180px); gap: 30px 20px; }

On that page that screws up the other listview.

Is there a different way to achieve this?

Andy

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 06 Mar 2022, 04:02 PM

Hi Andy,

You can use the Class parameter of the component to set a specific CSS class on each of the listviews so that you can cascade the CSS rules through it and only target the desired instance.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ListView
Asked by
Andy
Top achievements
Rank 1
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or