Angular material checkbox vertical line

Question

I'm having an issue with Angular Material checkbox where after rendering there is an additional vertical line that is added because a class in the material.

This is my HTML:

<div class="col-md-6 col-sm-12">
   <div class="col-sm-12">
      <mat-checkbox class="full-width" formControlName="TPA_NUSC">{{ 'GLOBAL.TAX_NUMBER_MANDATORY_AB' | translate}}</mat-checkbox>
   </div>
   <div class="col-sm-12">
      <mat-checkbox class="full-width" formControlName="TPA_VLNC">{{ 'GLOBAL.VALIDATE_TAX_NUMBER_AB' | translate}}</mat-checkbox>
   </div>
</div>

And this is my output:

That verical line comes from the class "mat-checkbox" that is added after the rendering, at least, if I remove the class the line will disappear.

Any tips about this issue?

@SamuelJMathew Tried but couldn't replicate online... can it be an outdated version of material? — João Silva
– João Silva, Commented Sep 12, 2018 at 10:32

Peter Kim · Accepted Answer · 2018-09-12 14:21:46Z

1

I had a similar problem but realized that I didn't have a theme.

Make sure you have something like this in styles.css: @import "~@angular/material/prebuilt-themes/indigo-pink.css";

answered Sep 12, 2018 at 14:21

Peter Kim

1,99715 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Silva Over a year ago

I have it already imported, might be any other library :\ Thank you for the help, I'm going try to find what is wrong and if I find it I will post it in here

João Silva · Accepted Answer · 2018-09-13 11:29:50Z

I have found the issue, seems that someone add a class in our company css that override that indigo-pink.css

Many thanks to @Peter Kim to allow me to find the issue.

If anyone will have an issue like this, there is how I found out what could be wrong.

Try to get the cloested element in your developer console

Doing that I found out that the class had an border-right.

Click in the right top corner to go to the css file that is causing the issue

It will redirrect you to the css file, however it may not tell you which file it's, but you can go to your index.ts or where you declared your css and count the css until you get a match, for example, in my case it was the 14th sheet.

Just go to that sheet and search for the issue, in my case I searched for #b7b7b7 and it was a direct match.

Hope it help some else.

Collectives™ on Stack Overflow

Angular material checkbox vertical line

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related