CODEWITHSUNDEEP
blazorblazor-server-sidemudblazor
BankMan101
BankMan101

Reputation: 281

MudBlazor DataGrid Column Headings not Bold

I am using mudblazor 6.10.0. I have a MudDataGrid and everything works fine but the column headings are not bold like in the samples. I have the grid defined as follows

 <MudDataGrid T="Range" MultiSelection="true" FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" Items="@_carRanges" SortMode="SortMode.Multiple" Dense ="true"
             QuickFilter="@QuickFilter" ColumnResizeMode="@(ResizeMode.Column)" DragDropColumnReordering="true" Striped="true" FilterMode="DataGridFilterMode.ColumnFilterRow">
        <ToolBarContent>
            <MudTooltip Text="Add Range">
                <MudFab id="Add-CarRange" Color="Color.Tertiary" Size="Size.Medium" StartIcon="@Icons.Material.Filled.Add" Href="feerangesave/0" />
            </MudTooltip>
            <MudTextField @bind-Value="SearchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
        </ToolBarContent>
        <Columns>
            <PropertyColumn Property="x => x.Name" Title="name" Resizable="true" Filterable="true" />

            <PropertyColumn Property="x => x.MinRange" Title="Min Range" Resizable="true" Filterable="true" Format="N0" CellStyle="text-align: right"/>
            <PropertyColumn Property="x => x.MaxRange" Title="Max Range" Resizable="true" Filterable="true" Format="N0" CellStyle="text-align: right"/>
        </Columns>
    </MudDataGrid>

In the MainLayout.cs i have the following

 <MudDialogProvider/>
    <MudThemeProvider />
    <MudLayout>
        <MudAppBar Elevation="1" Dense="true" Color="MudBlazor.Color.Info">
            <MudIconButton Icon="@Icons.Material.Filled.Menu" Edge="Edge.Start" OnClick="@ToggleDrawer" />
            <MudSpacer />
            <MudText Typo="Typo.h5" Color="MudBlazor.Color.Default" Style="color: white;">@Heading</MudText>
        </MudAppBar>
        <MudDrawer @bind-Open="@_menuOpen" ClipMode="_clipMode" Elevation="1" Variant="@DrawerVariant.Responsive">
            <NavMenu />
        </MudDrawer>
        <MudMainContent>
            <CustomErrorBoundary>
                <div class="content px-4">
                    @Body
                </div>
            </CustomErrorBoundary>
        </MudMainContent>
    </MudLayout>

Here is the th being overridden

Upvotes: 4

Views: 2625

Answers (4)

KhataPlus
KhataPlus

Reputation: 17

If you want to use bootstrap, you can use

class="fw-bolder"

as your PropertyColumn attribute

Reference : https://getbootstrap.com/docs/5.0/utilities/text/#font-weight-and-italics

Note: Use 'class' instead of 'Class'

Upvotes: 0

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11392

Keeping the default app.css (or site.css) file that comes from the project template causes this problem.

Removing the following lines fixes the issue.

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Upvotes: 0

wil55n
wil55n

Reputation: 51

In my case, it was because I had override the Default font with my own font. It appears that setting your own Default font, overrides all styles in the data grid.

To fix this, I set my custom fonts for each style (H1, H2, Body1, Body2 etc) and left the default alone.

Upvotes: 1

RBee
RBee

Reputation: 4967

You can always add styles to it manually with the PropertyColumn.HeaderStyle property. i.e.

<PropertyColumn Title="MyPos" HeaderStyle="font-weight:900;font-size:2rem;" Property="x => x.Position" />

Although, as @maciek mentions in the comments, you should try to find what's overriding your style first.

Upvotes: 3

Related Questions