New to Telerik UI for Blazor? Download free 30-day trial

Card Icon Button Size Too Big

Environment

Product Card for Blazor

Description

Card icon buttons are sized incorrectly when used with vertical orientation. The CardAction icon buttons become huge squares with side length of the Card's width.

The icon buttons become large squares also in horizontal orientation with stretched layout.

Cause\Possible Cause(s)

There are two CSS styles in the Telerik Blazor theme, which cause the action icon buttons to increase their size and become big:

  1. Icon buttons without text are square by definition:

    .k-icon-button {
        aspect-ratio: 1;
    }
    
  2. A Stretched Layout or Vertical Orientation for the CardActions area will expand the action buttons horizontally, so they fill the Card width. However, icon buttons will also expand vertically, because of their square aspect ratio.

    .k-card-actions-stretched > * {
        flex: 1 1 auto;
    }
    

Solution

There are two ways to prevent icon button expansion:

Prevent CardAction icon buttons becoming too large

<p>Card 1</p>

<TelerikCard Width="350px">
    <CardHeader>
        <CardTitle>Vertical orientation</CardTitle>
        <CardSubTitle>Custom CardActions Class</CardSubTitle>
    </CardHeader>
    <CardActions Orientation="@CardOrientation.Vertical" Class="no-icon-expand">
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
    </CardActions>
</TelerikCard>

<p>Card 2</p>

<TelerikCard Width="350px">
    <CardHeader>
        <CardTitle>Horizontal orientation / Stretched layout</CardTitle>
        <CardSubTitle>Custom CardActions Class</CardSubTitle>
    </CardHeader>
    <CardActions Orientation="@CardOrientation.Horizontal" Layout="CardActionsLayout.Stretched" Class="no-icon-expand">
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
    </CardActions>
</TelerikCard>

<p>Card 3</p>

<TelerikCard Width="350px">
    <CardHeader>
        <CardTitle>Horizontal orientation / Center layout</CardTitle>
    </CardHeader>
    <CardActions Orientation="@CardOrientation.Horizontal" Layout="@CardActionsLayout.Center">
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
    </CardActions>
</TelerikCard>

<style>
    .no-icon-expand .k-icon-button {
        aspect-ratio: auto;
    }
</style>

@code {
    string FlatFillMode { get; set; } = ThemeConstants.Button.FillMode.Flat;
}
In this article