MudBlazor/MudBlazor

Doc: MudDataGrid example "Column Types" breaks when cell content spans over multiple lines

Open

#10976 opened on Mar 7, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)C# (10,394 stars) (1,631 forks)batch import
docsgood first issuehas workaround

Description

Things to check

  • I have searched the existing issues for this bug
  • To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Docs (mudblazor.com)

Component name

MudDataGrid

What happened?

Not sure if this is actually an issue but it's something that can be definitely improved.

In the MudDataGrid documentation there is an example about inserting buttons and other elements in a column: Column Types

The user is likely to use such example as starting point to build DataGrids with such characteristics. However, if you have the content of a cell spanning over multiple lines, you'll notice that the layout of the cell containing custom elements will broke. Please see this code snippet created by copying the code in the doc, removing unnecessary columns and inserting a long text in a cell.

Expected behavior

I'd expect that if I embed the code from the example in my solution, it doesn't break as soon as there is a cell with a multiline content.

Workaround

There actually is a solution, which is to move the CSS classes from the TemplateColumn element to the MudStack element, such as in the following code snippet

Reproduction link

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

Reproduction steps

  1. Copy the code from MudDataGrid example Column Types
  2. Edit the content of a text cell such that it spans over multiple lines of text.

Version (bug)

The version used in try.mudblazor, currently I guess 8.3.0

What browsers are you seeing the problem on?

Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

  • I would like to do a Pull Request

Code of Conduct

  • I agree to follow this project's Code of Conduct

Contributor guide

Tech stack
csharpcsshtml
Domain
documentation
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90
Research direction
Update the MudDataGrid 'Column Types' example in the documentation to move the CSS classes from the TemplateColumn element to the MudStack element, as shown in the workaround snippet at https://try.mudblazor.com/snippet/wawzOnOVGikptmQb. The documentation page is at https://www.mudblazor.com/components/datagrid#column types, and the fix ensures cells with multiline content do not break layout.