RadzenDataList items alignment

Radzen.Blazor Components
1

Is there any way of aligning items inside RadzenDataList so the last row doesnt stretch. If i am specific.. i want that the items in last row are rendered the same way as all previous. Fixed width and aligned left (start).

code example from demo page:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage


    <RadzenDataList WrapItems="true" AllowPaging="true"
                    Data="@products" TItem="Product" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
        <Template Context="product">
            <RadzenCard Style="width: 200px; padding: 0;">
                <RadzenRow Gap="0">
                    <div>Some item</div>
                </RadzenRow>
            </RadzenCard>
        </Template>
    </RadzenDataList>

@code {
    bool allowVirtualization;

    IQueryable<Product> products;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        products = dbContext.Products.Include("Category").Include("Supplier");
    }
}

Result:

radzen_data_list
radzen_data_list1118×395 18.9 KB

What i want (edited in ms paint :slight_smile: )

radzen_data_list_what_i_want
radzen_data_list_what_i_want1118×395 18.9 KB

2

Hi @Marko_Steger,

You can achieve this using CSS. For example, add this to your site/app.css after the radzen theme.css file:

.rz-g > div {

    /* Unset the flex rule */
    flex: unset;

    /* Make the list responsive with items reordering on smaller screens */
    width: calc(25% - 2*var(--rz-datalist-item-horizontal-margin)) !important;
    min-width: 300px;
}
3

While @yordanov was cooking his modern CSS reply I've made an old-school "float" and "clear" based one.

<style>
    .rz-g {
        display: block;
    }

    .rz-g:after {
      clear: both;
      display: block;
      content: ''
    }
</style>

  <RadzenDataList WrapItems="true" AllowPaging="true"
               Data="@products" TItem="Product" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
        <Template Context="product">
            <div style="background: transparent; float: left;">
            <RadzenCard Style="width: 200px; padding: 0;">
                <RadzenRow Gap="0">
                    <div>Some item</div>
                </RadzenRow>
            </RadzenCard>
            </div>
        </Template>
 </RadzenDataList>

Posting it mostly for old-time's sake.

1 Like
4

Works like a charm. Thanks.