diff --git a/knowledge-base/listview-kb-display-items-horizontally.md b/knowledge-base/listview-kb-display-items-horizontally.md new file mode 100644 index 0000000000..8dd573f6e2 --- /dev/null +++ b/knowledge-base/listview-kb-display-items-horizontally.md @@ -0,0 +1,80 @@ +--- +title: Display ListView Items Horizontally in Blazor +description: Learn how to arrange the items in a TelerikListView for Blazor horizontally using custom CSS styles. +type: how-to +page_title: How to Arrange Telerik Blazor ListView Items Horizontally +slug: listview-kb-display-items-horizontally +tags: listview, blazor, layout, css, styling +res_type: kb +ticketid: 1649286 +--- + +## Environment + + + + + + + +
ProductListView for Blazor
+ +## Description + +I want to display the items in the TelerikListView component horizontally. + +This KB article answers the following questions: +- How to set the TelerikListView layout to horizontal? +- Is it possible to display ListView items side by side in Blazor? + +## Solution + +To display the ListView items horizontally, apply the `display: inline-block;` CSS style to the `k-listview-item` HTML div element. This approach allows you to customize the appearance of each ListView item and arrange them side by side. + +`````CSHTML + + + + +

Employee List

+
+ +
+ +@code { + private List ListViewData { get; set; } = Enumerable.Range(1, 25).Select(x => new SampleData + { + Id = x, + Name = $"Name {x}", + Team = $"Team {x % 3}" + }).ToList(); + + public class SampleData + { + public int Id { get; set; } + public string Name { get; set; } + public string Team { get; set; } + } +} +````` + +## See Also +- [TelerikListView for Blazor - Overview](https://docs.telerik.com/blazor-ui/components/listview/overview) +- [TelerikListView for Blazor - Templates](https://docs.telerik.com/blazor-ui/components/listview/templates)