fullstackhero / blazor-wasm-boilerplate

Clean Architecture Boilerplate Template for .NET 6.0 Blazor WebAssembly built for FSH WebAPI with the goodness of MudBlazor Components.

Home Page:https://fullstackhero.net/blazor-webassembly-boilerplate/general/getting-started/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MudTable cannot calculate width other than English.

SniperChan opened this issue · comments

Bug type
Component

Component name
MudTable

When the HeaderContent is in English, the width of the table can be correctly recognized, and the horizontal scroll bar will automatically appear at the bottom.
image

But when using other languages as the header, the scroll bar doesn't appear, and set HorizontalScrollbar="true" , doesn't take effect. All columns are tightly packed together.

image

Expected behavior
Why does this happen, and how do other languages make columns auto-fit to width?

Reproduction link
https://try.mudblazor.com/snippet/GaQcErFRmjziWsCv

Version (bug)
6.0.11

What browsers are you seeing the problem on?
Chrome, Microsoft Edge

On what operating system are you experiencing the issue?
Windows

please help.

This seems like something better reported on the mudblazor repository (https://github.com/MudBlazor)?

I don't think it's a bug though... the reason the columns in english are wider is because there are no spaces in the header names, so it can't "split" the names over multiple lines, which is what is happening in the case with other languages.

This is normal html table behaviour... I don't think mudblazor can do much about it...

Btw, I tried your reproduction link, and I even got the horizontal scroll bar:
image

If you don't want the "auto splitting" behaviour, you can apply "white-space: nowrap" style to the headers (or apply individual width's):
https://try.mudblazor.com/snippet/wEwmuVFSwDvdAuqz

Thank you very much fretje for the answer, your answer is very useful to me.