LoginLayout

Radzen.Blazor Components
1

I customized LoginLayout to my needs and it works with no problems until I incorporate new themes in my application.

My customization was not too fancy, little color changes, little text changes. After applying new themes, the left (colored side) and right (form side) are not aligned but they are one on top of another. Tried to make a new application out of the box and it looks Ok.

I found that those to sides are wider than RadzenRow (flex container) so they could not fit this area and they become not columns but rows.

How is column width calculated? What are variables that are included in this calculation which I probably messed with some of the CSS settings?

Thanks in advance

2

Hi @Djordje,

This might be happening because new themes (v.5) do not include bootstrap's layout classes. Have a look at this forum post RadzenCard v4 to v5? - #2 by yordanov, this in particular

you can use RadzenRow and RadzenColumn instead of bootstrap's <div class="row" and <div class="col-*"

We'd need a code sample to tell you more about your specific case.

3

I am already using RadzenRow and RadzenColumn (that is by default in Radzen Blazor Studio

Source is like this:

<RadzenLayout Style="background: url('images/login.jpg'); background-size: cover;">
    <RadzenBody>
        <RadzenStack JustifyContent="Radzen.JustifyContent.Center" Class="rz-mx-auto rz-p-4" Style="max-width: 1440px; height: 100%;">
            <RadzenCard class="rz-shadow-3 rz-border-radius-4" style="padding: 0; overflow: hidden; background-color: var(--rz-base-background-color);">
                <RadzenRow  Gap="0">
                    <RadzenColumn Size="12" SizeSM="6" Class="rz-background-color-primary rz-p-12" style="background-image: radial-gradient(circle at 7rem 4rem, var(--rz-danger) 0%, var(--rz-primary-darker) 80%); position: relative; background-color: #b0444f;">
                        <RadzenImage Path="images/1703548541788-Standard.png" style="width: 120px"></RadzenImage>
                        <RadzenText Text=@Greetings TextStyle="Radzen.Blazor.TextStyle.H2" class="rz-mt-4 rz-mt-md-12 rz-pt-0 rz-pt-md-12 rz-mb-6 rz-color-white rz-display-none rz-display-sm-block" />
                        <RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-mb-12 rz-pb-0 rz-pb-md-12 rz-color-white rz-display-none rz-display-sm-block">
                            Popunite vaลกe kredencijale za nastavak.
                        </RadzenText>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeSM="6" class="rz-p-12">
                        <RadzenImage style="width: 120px; float: right" Path="images\1743798_key_cyber_lock_secure_icon256.png"></RadzenImage>
                        @Body
                    </RadzenColumn>
                </RadzenRow>
            </RadzenCard>
            <RadzenText Text="Bezra v7.0.0, Copyright โ’ธ 2023" TextStyle="Radzen.Blazor.TextStyle.Caption" TextAlign="Radzen.TextAlign.Center" Style="width: 100%; margin-top: 20px" TagName="Radzen.Blazor.TagName.P"/>
        </RadzenStack>
    </RadzenBody>
</RadzenLayout>

<style>
    .rz-form-field {
        margin-bottom: 20px;
        margin-top: 20px;
    }
</style>

Radzen Blazor Studio login page looks like picture in attachment

LoginRazor
LoginRazor1834ร—938 46.6 KB

4

And it looks as it should given the provided sample code.

In your first post you stated that "the left (colored side) and right (form side) are not aligned but they are one on top of another.". In the screenshot they are next to each other. They wrap one above the other on smaller screen sizes and you can control this via the Size properties of RadzenColumn. See the Responsive page layout help article.

<RadzenColumn Size="12" SizeSM="6" ... >
5

I just tried this in a different browsers and errors appear only in Chrome, Firefox and Edge are good and they display the page correctly.

This is how it looks in Chrome.

BadLogin
BadLogin1920ร—1200 38.5 KB

6

Could you please try with clearing your browser's cache?

7

Cleared. Still the same.

8

Hi @Djordje,

We couldn't reproduce the issue with the provided sample code. Here is a video:

There is clearly something wrong with the theme styles since the form fields also look broken on your last screenshot.

If you are using a premium theme (Fluent or Material3) you can try reloading it by switching to another theme and back to the theme you want as shown in this video:

This will load the latest version of the theme.

9

Switching between themes does not have any effect but I found something interesting. When I switch between lite and dark versions of the theme then I have a proper login screen even in chrome.

LoginRazorDark
LoginRazorDark1920ร—722 33 KB

and there is a difference between other pages when they are switching between lite and dark versions of theme. (notice border on lite theme)

HomeDark
HomeDark3118ร—1438 151 KB

HomeLite
HomeLite3126ร—1432 131 KB

10

@Djordje if possible send us the app to troubleshoot (info@radzen.com) or provide a link if the app is accessible online. You can also use ngrok - it allows you to create a public URL of your local machine and share the URL with us over email.

11

Something interesting happened just now. I put some effort into installing ngrok on my computer and configuring it and it works so I tried my application over ngrok just to see it in action. I was very surprised when my application worked with no problem and then I realized that there is a message "Your Chrome is up to date", then I tried without ngrok just plain chrome on the local machine and there was no more error.

Thank you Vasil for your devotion to solving the problem but obviously it was a problem with Chrome not with your product.

1 Like