Tooltip and other Colors on Material 3 Dark messed up on latest push

Radzen Blazor Studio
1

I recently updated the Radzen packages and the tooltips now show up as white text on a white popup in the Material 3 Dark. The CSS was generated from the latest pull in Radzen Blazor Studio as well:
image

Additionally, colors are washed out in a Dialog popup with RadzenInputs and RadzenText within a Radzen Card:
image

Is there an easy fix for this? I have the tool setup to allow users to swap their theme like how you have it set up on your page, so for now I've been having them choose a different theme until I can fix.

Thanks

2

Hi @gpankretz,

This is not known issue. Can you provide more info what was the original version and what’s the new version (latest?). Please provide more info which theme(s) are affected.

While we are researching the problem at your end you can downgrade to the version that worked properly.

3

I just updated to the latest version today, but the problem appears to have began when I pulled the update from 2 weeks ago. So the problem still exists in 4.15.11 (nuget package version). I'm pretty good about pulling in updates since I'm still in a very developmental state. It was working fine about 3 weeks ago. 2 weeks ago I updated and pushed the change and a user immediately noticed this issue. I can't tell exact version I was on at that time, my apologies.

The only theme that appears to have this problem is "Material 3 Dark".

This is the version of Radzen Blazor Studio used to generate the CSS
image

4

I'm unable to reproduce such problem both in our demos:

image
image1920×1080 233 KB

And using Radzen Blazor Studio:

image
image1920×1080 179 KB

image
image1920×1080 82.6 KB

5

I know this old, but I figured out the issue, so I'm posting my solution in case anyone else sees the same behavior. When I load more than simple text (i.e. a RadzenCard) into the tooltip the result will occur:

@inject TooltipService tooltipService

<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text="Show tooltip" MouseEnter="@(args => ShowTooltip(args) )" />
</div>

@code {
    void ShowTooltip(ElementReference elementReference, TooltipOptions options = null) => 
        tooltipService.Open(elementReference, ds=> @<RadzenCard>Hello!</RadzenCard>, options);
}

This example shows the problem in your demo pages.
To fix I simply added the class rz-primary to the top level element in the popup and it works in all different themes:

 tooltipService.Open(elementReference, ds=> @<RadzenCard class="rz-primary">Hello!</RadzenCard>, options);

I hope this helps someone!

1 Like