Rendering component

Radzen.Blazor Components
1

Hello,

In a razor server application created via VS2022.

I followed the instruction to use Radzen :

  1. Install nuget
  2. Add lines @using Radzen and @using Radzen.Blazor in _Imports.raror
  3. Add .css in _Layout

Add .js file :

But the components don't look like your web site (see picture). I tried to remove some .css file generated by VS2022 but no change.

Could you help me.

Thanks,

2022-09-13_14-52-14
2022-09-13_14-52-142190×700 38.3 KB

2

There are different themes/css files. Our demos are using standard.css while you’ve referred default.css.

1 Like
3

Hello,

I updated to package to the new one (4.1, great stuff, thanks) when I launch my application (the VS2022 blazor template), I did a copy/paste from your code to my page, there are differences (see the picture). The rendering is different.

I missed something?

Thanks,

I have this in _Layout.cshtml page :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Riziv.NewAttestBlazor.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard.css">
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>

2022-09-22_07-36-24
2022-09-22_07-36-241613×443 79.1 KB

4

We are using material theme by default in our demos while you have referred Standard and Default (base) - not sure why both.

image
image1920×1080 170 KB

5

I tried material-base.css or/and material.css the button page is ok but no the form page.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Riziv.NewAttestBlazor.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css">
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

2022-09-22_08-05-36
2022-09-22_08-05-36763×477 9.45 KB

6

You need just one of the styles. Check this thread what's the difference:

I'm afraid I don't understand this.

7

The code from your web site paste in my project is ok (same look).

Your code for "TemplateForm" copied in my project does not look like your sample but looks like the screenshot in the previous post.

I tested "material-base.css" and "material.cs" both and one and not the other but the Templateform does not looks like your rendering.