Equal Width Buttons in Radzen Blazor (Without JavaScript)

Radzen.Blazor Components
1

I'm trying to create a row of three RadzenButtons that are horizontally aligned, where all buttons have the same width as the widest button. I prefer to avoid using JavaScript if possible. Here are my specific requirements:

  1. The buttons should be placed side by side horizontally.
  2. All buttons should have the same width.
  3. The width of all buttons should be equal to the width of the button with the longest text.
  4. The group of buttons should not extend beyond the necessary space (i.e., they should not occupy the full width of their container if it's not needed).
  5. The solution should preferably use only CSS and/or Blazor C# code, without relying on JavaScript.

I've tried various CSS approaches using Flexbox, but I haven't been able to achieve the desired result. The buttons either end up with different widths or occupy the entire available space.

Here's a basic example of what I'm working with:

<div class="button-container">
    <RadzenButton Text="Button 1" />
    <RadzenButton Text="Button with long text" />
    <RadzenButton Text="B3" />
</div>

Could you please provide guidance on how to implement this using Radzen components in Blazor, preferably with a CSS-only solution or a combination of CSS and Blazor C# code? If a JavaScript-free solution is not possible, please explain why and suggest the minimal JavaScript required.

Thank you in advance for your help!

2

I don't think that's possible. Unlike the example I shared in your other post where the DataGrid column will fit to the longest content nothing will force your buttons to have the width of the biggest button aligned horizontally.

3

Thanks for your reply

4

@Massimo_Spinelli you can try placing the buttons inside a RadzenStack:

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
    <RadzenButton Style="flex: 1;" Text="Primary" ButtonStyle="ButtonStyle.Primary" />
    <RadzenButton Style="flex: 1;" Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
    <RadzenButton Style="flex: 1;" Text="Base" ButtonStyle="ButtonStyle.Base" />
    <RadzenButton Style="flex: 1;" Text="Info" ButtonStyle="ButtonStyle.Info" />
    <RadzenButton Style="flex: 1;" Text="Success" ButtonStyle="ButtonStyle.Success" />
    <RadzenButton Style="flex: 1;" Text="Warning" ButtonStyle="ButtonStyle.Warning" />
    <RadzenButton Style="flex: 1;" Text="Danger" ButtonStyle="ButtonStyle.Danger" />
</RadzenStack>

Note the Style="flex: 1;". This will make the buttons equally stretch to occupy the full width of the stack container.

image
image3148×132 24.5 KB

5

I already tried this workaround, but RadzenStack fill all horizontal available space, making big buttons.
How can I limit RadzenStack width to button content?

6

You can set width <RadzenStack Style="width: 400px"> or use the utility css classes for sizing -> Blazor Sizing Utilities | Free UI Components by Radzen

Keep in mind that the sizing is calculated from the outermost parent element, not the other way around.

7

I finally achieved the result this way:

<RadzenStack Orientation=Orientation.Horizontal Gap="0.5rem" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" class="mx-auto d-grid" style="grid-auto-columns: minmax(0, 1fr);grid-auto-flow:column;width:fit-content">
    <RadzenButton Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
    <RadzenButton Text="Base" ButtonStyle="ButtonStyle.Base" />
    <RadzenButton Text="Info" ButtonStyle="ButtonStyle.Info" />
    <RadzenButton Text="Success" ButtonStyle="ButtonStyle.Success" />
    <RadzenButton Text="Warning" ButtonStyle="ButtonStyle.Warning" />
    <RadzenButton Text="Danger" ButtonStyle="ButtonStyle.Danger" />
</RadzenStack>

I added:

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow:column;
width:fit-content

to create a grid with equal column and

class="mx-auto d-grid"

to center the stack and foce display grid instead of flex

8

Yes, grid layout is an option. Consider using class="rz-mx-auto rz-display-grid" instead as these are available with Radzen and do not require Bootstrap.