Question 261392 in Html Question posted in
Some basic documentation can be found here.

Html – CSS isn't applied directly in Angular app

I made login page using Angular, but CSS isn’t applied directly after loading page.
When I click input-form (email or password), then CSS is applied.

After loading page without clicking anything

After clicking a input box

Here are scss and html:

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  
  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;
    margin-bottom: 10vh;
    background-color: white;
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.2);
    padding: 50px;
  }
  
  form {
    display: flex;
    flex-direction: column;
  }
  
  .title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  
  mat-form-field {
    width: 20vw;
    background-color: white;
  }

  .buttons-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  
  .buttons-container > p {
    margin-top: 10px;
  }

  .route-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    text-decoration: none;
    color: white;
    border: white solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5rem;
    background-color: rgb(55, 55, 55);
  }

<div class="container">
    <div class="form-container">
      <div class="title">Register</div>
      <form>
        <mat-form-field>
          <mat-label>Enter your email</mat-label>
          <input matInput formControlName="email" />
        </mat-form-field>
        <mat-form-field>
          <mat-label>Enter your password</mat-label>
          <input type="password" matInput formControlName="password" />
        </mat-form-field>
      </form>
      <div class="buttons-container">
        <button
          mat-raised-button
          class="register-button">
          Register
        </button>
      </div>
    </div>
  </div>

<div class="container">
    <button (click)="back()" class="route-button"> Go to Login </button>
</div>

How could I edit the code to make CSS is directly applied after page loading?

Tags:

2

Answers


  1. 0

    Angular uses CSS encapsulation so that styles designed for one component don’t bleed over and cause unexpected results in other components. It’s likely you’re trying to declare your CSS globally at the page level, and encapsulation is preventing the component from using it.

    Observe the following component declaration

    @Component({
    selector: 'app-log',
    templateUrl: './log.component.html',
    styleUrls: ['./log.component.css'],
    encapsulation: ViewEncapsulation.None
})

    You’d want to make changes specific to the component in log.component.css. You’ll need to carefully consider what you want to incorporate globally vs on a component by component basis. It’s really powerful stuff when you get it working correctly.

    Login or Signup to reply.
  2. 0

    I used a material component (Angular Material and PrimeNG) and searched what they are doing wrong, cause the style did not append to some of their components.this could be a angular problem.

    the solution is to simply insert encapsulation: ViewEncapsulation.None in the @component definition.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search