6

I have an angular project where I'm using Angular Material and material table.

It seems that all the text in my table has the 10px margin top and bottom applied due to a class named something like: .ng-tns-c5-1 or .ng-tns-c6-1 etc.

I can't find a way to change those margins without inspecting element, finding that class and then using CSS to change that margin.

But after some changes to other elements on the app, the .ng-tns-c6-1 (for example) is changed to something like: .ng-tns-c4-0 and then I have to change that. The problem is I've done this 5-6 times now and it's a complete pain.

Because of that the table has a lot of useless white space and just overall makes things look bad.

What is that class and what can I do to make sure the margin remains at the 2-3px I'm setting?

This is the type of thing I have in my CSS:

.ng-tns-c5-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c5-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c6-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c4-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
Edric
  • 24,639
  • 13
  • 81
  • 91
SebastianG
  • 8,563
  • 8
  • 47
  • 111
  • I have the same issue after updating to Angular v9. This doesn't happen if I disable Ivy in compiler options. Does anyone know why this is happening? – CharithJ Feb 19 '21 at 02:16

1 Answers1

5

You can use the following to select all the current and future elements.

[id*='ng-tns-c'] {

}
Itamar
  • 885
  • 1
  • 9
  • 17
  • That's one way of doing it -- worked like a charm and learnt another css trick. – SebastianG Aug 17 '18 at 15:34
  • btw you could also select all of the same type of elements (ie ) – Itamar Aug 17 '18 at 15:39
  • Why is it `[id*='ng-tns-c']` and not `[class*='ng-tns-c']`? – msanford Feb 20 '20 at 19:39
  • All depends on what it was compiled into as well as the approach you're trying to exercise – Itamar Feb 23 '20 at 14:38
  • Is there any specific place this needs to be added? I tried adding this to index page style section but no luck... – CharithJ Feb 19 '21 at 04:53
  • Try right-click -> view source code, follow to understand what comes first and last, and edit your css files accordingly – Itamar Feb 22 '21 at 11:49
  • [id*='ng-tns-c'] should this be a separate class in css file. I have the same situation, and I am trying this: ::ng-deep .disabled .mat-form-field-outline [id*='ng-tns-c']{}. But this is not adding any styles. Thanks!! – Abhinash Jha Feb 16 '22 at 18:06
  • Sure id should be applied with a space after .mat-form-field-outline? – Itamar Feb 20 '22 at 09:37