3

I have the issue that then I change the appearance of the from field to outline the floating label breaks the outline.

enter image description here

<mat-form-field appearance="outline">
  <mat-label>Password</mat-label>
  <input matInput [(ngModel)]="password">
</mat-form-field>

this is the code to the picture.

I have no clue why this is happening ¯\_(ツ)_/¯

I have tried to find other stack overflows with this problem.

I have reinstalled angular material.

BTW: This only happens when the form field is in focus

CodeBoy361
  • 61
  • 6
  • Does this answer your question? [Material Design: how to disconnect float label for select?](https://stackoverflow.com/questions/49600605/material-design-how-to-disconnect-float-label-for-select) – Jonas Lang Feb 23 '23 at 10:44
  • @Jonas sadly not I still want the float label but I don't want the break. On the Material side the outline appearance with a float label is working – CodeBoy361 Feb 23 '23 at 11:05

2 Answers2

1

OK I finally figured it out. For people in the future who have the same problem here is how to fix it: I was using tailwindcss in combination with angular material the @tailwind base in the style.css is adding funny things to the border-style that material don't like. so to fix it add this:

*, ::before, ::after {
  border-style: none;
}

and the problem is gone :D

CodeBoy361
  • 61
  • 6
0

CodeBoy361s answer solves the problem. Here is another solution. We had the same Problem and fixed it as follows. Tailwind adds some default css styles. They call it preflight. You can disable Tailwind preflight completely by adding the follwing to your tailwind.config.js. (Most time you don't need preflight when using angular-material in combination with tailwind)

corePlugins: {
    preflight: false
}

See: https://tailwindcss.com/docs/preflight#disabling-preflight

Timo Dahlhoff
  • 1