CODEWITHSUNDEEP
cssblazormudblazor
Feneidje
Feneidje

Reputation: 31

Overriding Mudblazor expansion panel's padding

I'm new at Mudblazor and trying to override the default padding of the expansion panel header. Here is what the html looks like: html mudblazor

Mudblazor creates a div with a .mud-expand-panel-header in the background and that's the element I want to change the bottom padding on. I tried inline css and change the styling from the css file without success. I also tried to use pb-1 on the TitleContent tag but that element doesn't take classes. Any ideas on how to change that?

Upvotes: 3

Views: 4532

Answers (1)

Quickz
Quickz

Reputation: 1846

Solution 1: How to apply custom CSS (directly)

If you wish to override the mud-expand-panel-header style directly, create a new CSS file, include it in the index.html file and make sure it's loaded after MudBlazor.min.css to ensure it takes a priority.

Once that's done, add the following code inside the new file:

.mud-expand-panel-header {
    padding: 4px;
}

Solution 2: How to apply custom CSS (indirectly)

Instead of modifying mud-expand-panel-header class directly, apply the CSS you need to any mud-expand-panel-header that's inside an element with a custom CSS class of your own.

Example

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

<style>
    .custom-expansion-panel .mud-expand-panel-header {
        padding-bottom: 4px;
    }
</style>

<MudExpansionPanel Class="custom-expansion-panel">
    <TitleContent>
        <div class="d-flex">
            <MudIcon Icon="@Icons.Filled.CheckCircleOutline" Color="Color.Tertiary" class="mr-3"></MudIcon>
            <MudText>Title</MudText>
        </div>
        <MudText Typo="Typo.subtitle1"><b>Price</b></MudText>
    </TitleContent>
    <ChildContent>
        <MudText>Age</MudText>
        <MudText Typo="Typo.body2">Notes</MudText>
    </ChildContent>
</MudExpansionPanel>

Solution 3: How to get Bootstrap working

If you wish for the pb-1 bootstrap class to work, go to the index.html file and make sure that bootstrap.min.css is loaded a̲f̲t̲e̲r̲ MudBlazor.min.css.

That's what you may currently have:

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

That's what you should have for the Bootstrap class to work:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Upvotes: 5

Related Questions