Content Overflow in RadzenTabs

Radzen.Blazor Components
1

Hello,
I currently have a problem with RadzenTabs. A RadzenDatagrid is displayed in the RadzenTabsItem. This loads images and is then displayed in a RadzenImage.
Two images are loaded and placed on top of each other.
The position-relative and position-absolute classes are used for this.
Unfortunately, the images are not displayed in full in the TabsItem.
How can I make this possible?

<div class="position-relative">
	<RadzenImage Path="@($"data:{_currentSearchResult.MimeType};base64,{_currentSearchResult.Base64String}")" Style="max-width: 100%" class="position-absolute z-1" />
	@if (_overlaySearchResult is not null)
	{
		<RadzenImage Path="@($"data:{_overlaySearchResult.MimeType};base64,{_overlaySearchResult.Base64String}")" Style="max-width: 100%" class="position-absolute z-0" />
	}
</div>

image
image1586×471 62.6 KB

2

Hi @_mrg,

I am not sure this problem is related to RadzenTabs to be honest. Can you make it work outside of it?

3

Hi @korchev,

outside the tabs it works.

I think it is due to a CSS property that needs to be adjusted.

I also load images that are not overlaid without the bootstrap class "position-relative" then the image is displayed correctly.

Hopefully you can help me

4

Hi @_mrg,

position-absolute makes the images render relatively to the position-relative div. In this case the div does not know the height of it's children and renders without height. One option is to explicitly set height of the div, another option is to use different layout without absolute positioning. For example you could try rendering the images in a RadzenStack.

1 Like
5

The solution with RadzenStack was a great solution for me.
Thank you very much.