RadzenButton text oveflows the bounds of the button

Radzen.Blazor Components
1

Hi,
I came across this odd behavior using RadzenStack oriented horizontally and buttons.
What I wanted to achieve is make the first control in the stack to span as far as it gets (in the example below the primary button) and the rest of the controls that are also buttons to fill the rest of the space.
To do that I include in the class attribute of the first control rz-w-100 and it does the trick but now all the texts of the following buttons overflows.

image

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
    <RadzenButton class="rz-w-100" Text="Primary" ButtonStyle="ButtonStyle.Primary" />
    <RadzenButton  Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
    <RadzenButton  Text="Base" ButtonStyle="ButtonStyle.Base" />
    <RadzenButton  Text="Info" ButtonStyle="ButtonStyle.Info" />
    <div>
        <RadzenButton Text="Success" ButtonStyle="ButtonStyle.Success" />
    </div>
    <RadzenButton  Text="Warning" ButtonStyle="ButtonStyle.Warning" />
    <RadzenButton  Text="Danger" ButtonStyle="ButtonStyle.Danger" />
</RadzenStack>

After inspecting the html source and playing around for a while I found that the span that contains the icon and the text of the button has a the css property display set to inline-flex and that seem to be the problem. I am not 100% sure but changing that to flex solves the issue.

Anyway, a simple walk around is to put the button inside a div and the this force the expected behavior as is shown for the Success button in the example.

My question to the community is:
Am I doing something wrong? Is there a better way to achieve what I want?
Of course I would prefer to not have to wrap all my buttons in divs.

Thanks for the support!

2

Hi @matt90hz,

This happens because the button is designed to resize with respect to its contents, but RadzenStack forces it to resize with respect to the parent.

One option is to place all smaller "secondary" buttons inside another RadzenStack. This way you'd be able to control the responsive behaviour using the responsive utility css classes.

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
    <RadzenButton class="rz-w-100" Text="Primary" ButtonStyle="ButtonStyle.Primary" />
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
        <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>
</RadzenStack>

Another option is to set <RadzenButton Style="min-width: fit-content;" to all buttons.

You can combine both approaches to reach the best behaviour according to your particular scenario and screens.

3

Far better like this.

Thanks @yordanov , for your support!