Labels are not displayed correctly in Edge

I am working with Blazor WebAssembly project in C#.
When I run my application in Edge it looks like this

In the same moment in Chrome everything looks fine

Could anybody help me how to fix my dialog

My dialog definition looks like that:

@inject DialogService DialogService
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject OpsTokenService tokenService
@inject KixConfiguration config
@inject HttpClient httpClient

<style>
  .rz-dialog-titlebar {
      background-color: lightblue;
      padding-top: 12px;
      padding-bottom: 12px;
  }
</style>

<RadzenStack Orientation="Orientation.Vertical">
  <RadzenStack Orientation="Orientation.Horizontal">

      <RadzenStack Orientation="Orientation.Vertical" Gap="4px" AlignItems="AlignItems.Start">
          <RadzenFormField Text="Sequence number" Variant="@variant">
              <RadzenTextBox @bind-Value="@Number" Disabled=true />
          </RadzenFormField>
          <RadzenFormField Text="Enqueued" Variant="@variant">
              <RadzenTextBox @bind-Value="@Enqueued" Disabled=true />
          </RadzenFormField>
          <RadzenFormField Text="Id" Variant="@variant">
              <RadzenTextBox @bind-Value="@Id" Disabled=true />
          </RadzenFormField>
      </RadzenStack>

      <RadzenStack Orientation="Orientation.Vertical" Gap="4px" AlignItems="AlignItems.Start">
          <RadzenFormField Text="Reason" Variant="@variant">
              <RadzenTextBox @bind-Value="@Reason" Disabled=true />
          </RadzenFormField>
          <RadzenFormField Text="Topic" Variant="@variant">
              <RadzenTextBox @bind-Value="@Topic" Disabled=true />
          </RadzenFormField>
      </RadzenStack>

  </RadzenStack>

  <RadzenFormField Text="Error" Variant="@variant">
      <RadzenTextArea @bind-Value="@Error" Disabled=true />
  </RadzenFormField>

  <RadzenFormField Text="Body" Variant="@variant">
      <ChildContent>
          <RadzenTextArea ReadOnly=true @bind-Value="@Body" style="min-height: 150px;" />
      </ChildContent>
  </RadzenFormField>

  <RadzenFormField Text="Token" Variant="@variant" Visible=@(!string.IsNullOrEmpty(@foundNewToken))>
      <ChildContent>
          <RadzenTextArea ReadOnly=true @bind-Value="@foundNewToken" style="min-height: 75px;" />
      </ChildContent>
  </RadzenFormField>

  <RadzenStack Orientation="Orientation.Horizontal">
      @if (Body != null && Body.Contains("PushNotification") && Body.Contains("Token"))
      {
          <RadzenButton Icon="edit" Text="Check token" ButtonStyle="ButtonStyle.Success" Click="() => CheckToken()" />
      }
      <RadzenButton Icon="outgoing_mail" Text="Resend" ButtonStyle="ButtonStyle.Primary" Click="async () => { await ResendDeadLetter(); }" />
      <RadzenButton Icon="cancel" Text="Cancel" ButtonStyle="ButtonStyle.Secondary" Click="() => { CancelEdit(); }" />
  </RadzenStack>

</RadzenStack>

I open dialog in following code:

      RenderFragment<DialogService> TitleContent = ds =>
      @<span>
      <RadzenIcon Icon="edit" class="dialog_title_content" />
      <RadzenIcon Icon="outgoing_mail" class="dialog_title_content" />
      <span class="dialog_title_content">@($"Edit and resend dead letter #{item.SequenceNumber}")</span>
      </span>
  ;

      dynamic dynResentItem = await DialogService.OpenAsync<EditDeadLetterDialog>($"Edit dead letter #{item.SequenceNumber}",
       new Dictionary<string, object>() { 
           { "Number", item.SequenceNumber!.ToString()??"" },
           { "Enqueued", item.EnqueuedTime!.Value.DateTime.ToLocalTime().ToString("G") },
           { "Id", item.Id.ToString() },
           { "Reason", item.Reason },
           { "Topic", item.Topic },
           { "Error", item.ErrorDescription },
           { "Body", item.Body }
           },
       new DialogOptions() { Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = true, TitleContent = @TitleContent });

I am new in Radzen development so maybe I am simply doing something incorrect.

Hi @Serhii_Sokol,

I suggest reviewing the forum FAQ for tips how to improve your question. As it is now it is unlikely to get answered - treat the community as you want them to treat you.

I tried to make my post more descriptive

Hi @Serhii_Sokol,

Thank you for updating the question. It is a lot better now. I have a few follow up questions for you:

  1. Does the RadzenFormField online demo display OK for you in Edge?
  2. Which version of Edge are you using? The one that uses the Blink engine (same as Chrome) or an older one?

Here is how the demo looks like in latest Edge - the labels are visible without any issues:

Thank you for your reply.

  1. Demo version of the RadzenFormField looks good in my Edge
  2. I am using Microsoft Edge for Business[Learn more about Microsoft Edge for Business] Version 121.0.2277.98 (Official build) (64-bit)
    This browser is made possible by the [Chromium] open source project and other [open source software]
    Microsoft Edge for Business
    © 2024 Microsoft Corporation. All rights reserved.

This all means that there is something in your application which is causing the discrepancy. We have eliminated the other issues (old version of Edge or general incompatibility of RadzenFormField and Edge).

Check if your page has a valid doctype declaration:

<!doctype html>

You can also use the browser's developer tools to inspect all CSS rules that apply to those labels. Also check if any CSS file that you include is affecting the display.

Ok. I will try to learn more to avoid misunderstandings. But so far I have found that the different appearance of the dialog box is browser independent. This depends on whether it is running on local host or on Azure after the application is deployed. In other words, it doesn't look right on Azure. But maybe this is a problem when deploying or configuring the application in Azure. So I am planning to create a new Hello World application and add a demo dialog. Then I will deploy to Azure and see what happens.

That's a different issue altogether. Check if all CSS files load as expected after deployment. Use the Network tab of your browser's developer tools and check for any failed HTTP requests.