CODEWITHSUNDEEP
.net-coreblazorblazor-server-sidemudblazor
Lorenzo Belfanti
Lorenzo Belfanti

Reputation: 1247

Same size for all MudItem using MudBlazor

I'm trying in MudBlazor to make e-commerce style boxes where you can view image, product name and other information.

I am currently using the MudGrid with the related MudItem. See this example:

Problem displaying items in the grid

As you can see the height of the various MudItem is not the same for all, but it adapts according to the size of the image. I would like the MudItem to be all the same high and that they remain responsive (depending on the display device)

You can find the code here: https://try.mudblazor.com/snippet/GaGcYmmFziEpEAPJ

Upvotes: 6

Views: 7014

Answers (3)

geometrikal
geometrikal

Reputation: 3294

Apart from adding Style="display: flex;" to the MudItem, if you want the buttons to be at the bottom as well add

Style="display: flex; flex-direction: column; width 100%;"

to each MudCard and

Class="mt-auto"

to each MudCardAction

Upvotes: 3

Scott D
Scott D

Reputation: 55

I was able to accomplish this by setting the MudItem style to display:flex and setting the MudCardContent style to min-height: 100px (in my case)

<MudPaper Width="100%" Class="darkbackground" MinHeight="350">
<MudContainer>
    <MudGrid>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm1.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">Always Evolving</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">Creating innovative new ways to trade the exchange markets</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm2.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">Is RainMaker Open Source?</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">RainMaker is not open source. Currently just a passion project</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm3.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">What is required to trade?</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">A broker account with Oanda.</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
</MudGrid>
</MudContainer>

Upvotes: 3

Leandro Toloza
Leandro Toloza

Reputation: 2020

I have the same issue, you need to do the following:

<MudGrid>
        <MudItem Style="display:flex;"> each card </MudItem>
        <MudItem Style="display:flex;"> each card </MudItem>
        <MudItem Style="display:flex;"> each card </MudItem>
</MudGrid>

Then you can adjust the content of each card. Also to avoid calling style everytime you could inject some css with one class.

Upvotes: 7

Related Questions