MudBlazor/MudBlazor

MudCard: CardHeaderActions results in inconsistent header height

Open

#12,719 创建于 2026年2月24日

在 GitHub 查看
 (6 评论) (0 反应) (0 负责人)C# (10,394 star) (1,631 fork)batch import
buggood first issue

描述

Before reporting

  • I searched existing issues
  • I tried in private/incognito browser

What went wrong?

Design issue

When having multiple MudCards side by side and some have an MudIconButton, they interfere the CardHeaderContent. As seen in the reproduction link and in the following image, the headers are at different positions. Also the heights of the cards are different. Blue line is for demonstration.

I would expect, the default behavior with default components and similar cards is having similar headers (h1, h2, no tag) on same y positions.

Reproduction link

https://try.mudblazor.com/snippet/QuwUumGIEvIWOKAS

Reproduction steps

  1. Create a grid with MudCards
  2. Add headers, some of them with Actions
  3. See the result

Version (bug)

9.0.0

Version (working)

(unsure)

Environment

Chrome, Firefox

Blazor rendering mode

Server, WASM

Edit: I don't expect different header styles to have the same base line. So the image might be a bit misleading. Only the two on the left and the two on the right should have the same line.

贡献者指南

技术栈
csharpcsshtml
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
active
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
CSS layout knowledgeBlazor component structure
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
Investigate the CSS styling of MudCard, particularly the CardHeaderActions component. Examine the MudCard.razor and related CSS files to understand how the header height is calculated. Look at the reproduction snippet to identify which CSS properties cause the inconsistency. Consider whether the issue is due to variable content or missing flexbox alignment. Check comments in the issue for any suggested approaches.