Problem with Title Bar in Razden Dialog

Radzen.Blazor Components
1

I am create a modal dialog, but when I run it, shows a transparent Title Bar and the close button (X) is no visible:

In adittion, I need to click twice in the close button that fires the dialogService.Close to close the dialog.
I am using the Razden.Blazor 3.1.10 version.

The call of the dialog is:

<input type="button" class="btn btn-primary" value="Details" @onclick=@(e => DialogService.Open($"Category {item.CategoryName}",
new Dictionary<string, object>() { { "dataSelected", item } },
new DialogOptions(){ Width = "500px", Height = "400px", Left = "calc(50% - 250px)", Top = "calc(50% - 200px)", ShowClose=true, ShowTitle= true})) />

Regards.
Dialog

2

CSS styles for Radzen.Blazor components are missing:

3

Thanks for your response, but I can't resolve the problem. I tried to remove the others css references but the problem persists.

This is the index.html file of my WebAssembly blazor app:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>PruebaComponentes</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="PruebaComponentes.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

Regards.

4

You can check if the Radzen CSS is loaded from the network tab of your browser's developer tools. Right now it looks as it doesn't.

5

Thanks for your response.

I find a very strange behavior. The project is an standard blazor WebAssemply app create with VS2019, the project incudes the "Counter" and "Fetch Data" menu option wich are automaticaly added to project.
When I run the app for first time the default-base.css file are no loaded.
If the app raised an error (in my case the Fech Data option don't work) and I press the Reload option in the messaje show in the browser, the default-base.css is loaded and the dialogs works fine.

Regards.

6

I have an status update: If I run the app in "no debug mode" (ctrl + F5) the dialog works fine.
I enable the javaScrip debug option in project's properties but the problem persists.

7

Just be sure that you are imported Radzen css library well. Can you add some RadzenButton to your form with different style like this:

<RadzenButton Text="Primary" ButtonStyle="ButtonStyle.Primary" />
<RadzenButton Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
<RadzenButton Text="Light" ButtonStyle="ButtonStyle.Light" />
<RadzenButton Text="Danger" ButtonStyle="ButtonStyle.Danger" />
<RadzenButton Text="Info" ButtonStyle="ButtonStyle.Info" />
<RadzenButton Text="Warning" ButtonStyle="ButtonStyle.Warning" />

Then please share your recent form view screenshot here.