CODEWITHSUNDEEP
angularmaterial-design
Francesco Manicardi
Francesco Manicardi

Reputation: 809

Why are my angular material form inputs not showing up correctly only in one component?

I'm developing a web application and all of a sudden the form material inputs stopped rendering correctly in one component only:

components aren't showing up correctly

Here's how they look in other components (expected and correct output):

how material inputs look in other components

Sample code for output above: Wrong output (the first image):

        <mat-form-field>
            <mat-label>Oggetto</mat-label>
            <input matInput placeholder="Oggetto" formControlName="oggetto">
        </mat-form-field>

sample code for second image(works well):

  <mat-form-field>
    <mat-label>Nome</mat-label>
    <input matInput placeholder="Nome" formControlName="name">
  </mat-form-field>

Note that the console doesn't show any errors. Happy to give more context if needed

Upvotes: 1

Views: 5210

Answers (1)

Francesco Manicardi
Francesco Manicardi

Reputation: 809

Found the answer: I was trying to set overflow:hidden on the html tag and accidentally set

  encapsulation: ViewEncapsulation.ShadowDom

on the component. I removed that line and now it's working again.

Upvotes: 1

Related Questions