I have this component. When code is commented, ItemRenderer (MudPaper) takes 100% width of parent (MudDropZone). But when I uncomment code and add showing description on hover, it stops to fill 100% of parent and fill only 50% of it. It looks awful.
I think problem is in ChildComponent but I dont know how to get around it. Do you have any ideas? I use Mudblazor components.
<MudDropContainer T="TransactionViewModel"
Items="transactions"
ItemsSelector="@((item,dropzone) => Enum.GetName(typeof(TransactionCategoryEnum), item.Category) == dropzone)"
ItemDropped="ItemUpdated"
Class="d-flex flex-wrap flex-grow-1">
<ChildContent>
<MudDropZone T="TransactionViewModel" Identifier="Saves" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
<MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:forestgreen">Saves</MudText>
</MudDropZone>
<MudDropZone T="TransactionViewModel" Identifier="Fees" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
<MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:darkred">Fees</MudText>
</MudDropZone>
<MudDropZone T="TransactionViewModel" Identifier="Entertainment" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
<MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:dodgerblue">Entertainment</MudText>
</MudDropZone>
</ChildContent>
<ItemRenderer>
@* <MudTooltip Placement="Placement.Bottom" ShowOnHover="true" Delay="150" Class="ma-4 pa-4">
<ChildContent>*@
<MudPaper Elevation="25" Class="pa-2 my-2">
<MudGrid>
<MudItem xs="8">
<MudText Typo="Typo.body1">@context.Name</MudText>
</MudItem>
<MudItem xs="4" Class="text-align-right">
<MudText Typo="Typo.body1">@context.Price</MudText>
</MudItem>
</MudGrid>
</MudPaper>
@* </ChildContent>
<TooltipContent>
<MudText Typo="Typo.body2">@context.Date.Format()</MudText>
<MudText Typo="Typo.body2">@context.Description</MudText>
</TooltipContent>
</MudTooltip> *@
</ItemRenderer>
</MudDropContainer>
I tried add classes to components like w-100 or styles like width:100% but it doesnt work.
2
The Style attribute of the Tooltip is for the TooltipContent.
You can use RootStyle for the ChildContent
<MudTooltip ... RootStyle="width: 100%;">
<ChildContent>
...
</ChildContent>
<TooltipContent>
...
</TooltipContent>
</MudTooltip>
Mudblazor Snippet