Skip to main content

Radzen

Row/Column

What you want Radzen CSS Equivalent
Left aligned (default)

<RadzenRow

JustifyContent="JustifyContent.Start">

 justify-content: flex-start;
Centered <RadzenRow JustifyContent="JustifyContent.Center"> justify-content: center;
Right aligned <RadzenRow JustifyContent="JustifyContent.End"> justify-content: flex-end;
Spaced evenly <RadzenRow JustifyContent="JustifyContent.SpaceEvenly"> justify-content: space-evenly;
Space between <RadzenRow JustifyContent="JustifyContent.SpaceBetween"> justify-content: space-between;
Space around <RadzenRow JustifyContent="JustifyContent.SpaceAround"> justify-content: space-around;
What you want Radzen CSS Equivalent
Top (default) <RadzenRow AlignItems="AlignItems.Start"> align-items: flex-start;
Centered vertically <RadzenRow AlignItems="AlignItems.Center"> align-items: center;
Bottom <RadzenRow AlignItems="AlignItems.End"> align-items: flex-end;
Stretch <RadzenRow AlignItems="AlignItems.Stretch"> align-items: stretch;

Column Tricks

Center inside a single column without a row:
<RadzenColumn Style="text-align: center;">
    <RadzenButton Text="Click Me" />
</RadzenColumn>

Translates to: text-align: center
Force column to take full width:
<RadzenColumn Size="12">...</RadzenColumn>

Like: flex: 0 0 100%

Skip the Row/Column

If you don’t actually need a grid, just use flex directly on the parent:
<div style="display:flex; justify-content:center; align-items:center;">
    <RadzenButton Text="Centered" />
</div>

💡 Quick mental model:

  • JustifyContent = left ↔ right

  • AlignItems = top ↕ bottom

  • text-align = inline content centering inside a block

DataGrid

Column Auto Size
<style>
    .autofit-grid table {
        table-layout: auto !important;
        width: 100%;
    }
</style>

Then add in the DataGrid attributes:

class="autofit-grid"

...or, globally in app.css:

.rz-datatable-table {
    table-layout: auto !important;
}

 

No comments to display

Back to top