Angular - css resize column


What is the proper way to override default css for timeline with ‘week’ resolution?
We want to reduce week column width (make it narrower).
Setting class like below in Angular component does not seem to have any effect:

.mbsc-material.mbsc-timeline-column , 
.mbsc-timeline-day {
    width: 3em;

Any recommendation how to make it clean way via component css?

I refer to a view evample we want to modify:

timeline: { 
      type: 'month'
      size: 3,
      resolutionHorizontal: 'week',
      eventList: true,

Hi @Agnieszka_Baranowska :wave:

Please check the relevant part in the docs.

Thank you for your reply!

Forgive me simple question but the docs say:

How in practice can I apply my custom css after default rules in Angular component?
Putting it in component css has no effect unfortunately…

Thanks, Agnieszka

Try to set the encapsulation to None at your component level:

  selector: 'my-selector',
  styleUrl: './my-component.css',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './my-component.html',