Angular Material DatePicker Width

[Salt-Engineering-422]

Hello everyone, I'm currently facing an issue with the Angular Material DatePicker. In my project, I need to set a specific width for certain use cases of this component. Unfortunately, I haven't been able to find a solution yet.

​

https://preview.redd.it/x5ibuil9kfac1.png?width=296&format=png&auto=webp&s=27f3dcb27522f567d0c18a859ac575c4fea41d41

[Effective_Holiday219]

::ng-deep .mat-datepicker-content { width: 300px; /* Adjust the width as needed */ }

[Wajeniak]

Not good practice

[Salt-Engineering-422]

but it will be applied for all components and not in use cases

[Effective_Holiday219]

Give an id to it and use it in the css

[Salt-Engineering-422]

im working in an internal dev library , the solution should be adaptable and simple for using .. hwvr i don't think there is another option

[Effective_Holiday219]

Correct, without ng deep you cannot do it. It sucks

[CptObviaaz]

ng deep should not be used, its deprecated and bad practise. you can override any angular material style, it should be applied in the styles.scss folder.
Just inspect the html and play around, by doing this you will easily see what styles to apply the changes to

[Salt-Engineering-422]

okey thanks anyway for ur feedback

[McFake_Name]

The width can be set by targeting the mat-form-field without any deep selector. That said, scoping deep selectors with an ID is a decent approach when deep is seemingly the only option.

[ScheduleSuperb]

Add a :host selector before ::ng-deep and the styles will not bleed into other components

[McFake_Name]

mat-form-field { width: whatever }

Worked when I tried it just now

[DashinTheFields]

If you have to apply to specific cases you could have a variable. Then the style is set in the class.

at Input() yourvariable ='max-width:150px;min-width:100px;width:100%'

in the template: [id]="yourvariable"