CODEWITHSUNDEEP
cssblazorblazor-server-sidematblazor
John
John

Reputation: 105

How did designer apply this css class?

I am using the MatBlazor component library: https://www.matblazor.com/

and I am trying to understand how the designer for this website: https://blazor-wasm.quarella.net/Account/Login

centered the <MatCard/> element like so: enter image description here

My following code looks like this:

@page "/login"

@using System.Text.Json;
@using Data.Models
@using MatBlazor 

@inject HttpClient Http
    <MatCard >
        <MatCardContent >

        <MatH2>Login</MatH2>

        <button @onclick="OnLoginClick">Log in</button>

        <p>Need an account? Sign up</p>

        <button @onclick="OnSignUp">Sign up</button>
        </MatCardContent>
    </MatCard>

@code {

}

which outputs: enter image description here

The example code provided here: Login Razor Page, specifically line 27 {<MatCard> doesn't have any classes but the element is centered nicely across the screen.

Two questions

  1. How do I achieve this card centering effect using the MatBlazor library (minimal custom css)?
  2. How the login page designer center it? I see there was a ".login-container" class added which is here but there's no indication of it being used in the razor page.

EDIT:

  1. Where did the designer use class="login-body" or class="login-container" based on the answer below

Upvotes: 2

Views: 571

Answers (1)

shanabus
shanabus

Reputation: 13115

  1. As you mention, if you inspect the element of the login page, you can see that the MatCard is using the class login-container which applies a margin auto to the left and right side of the element. That's what is causing it to be centered.

Login Container css

  1. Most likely, per the stylesheet you referenced, the wrapping elements on the login page reference the CSS located here. It's called .login-body and just like in item 1 above, it is using a margin of auto to center horizontally.

  2. The login-body and login-container classes are applied to the pages by either the Shared/Components or the Shared/Layouts. For example, the Login page you reference in your question appears to be using the LoginLayout.razor here. There you can see that both of these classes are being used.

Upvotes: 3

Related Questions