Issue
I use <material-date-range-picker ...> but it is displayed to tall. I found that material_date_range_picker.scss declares .main-content { ...; height: $datepicker-main-content-height; ... } and $datepicker-main-content-height is defined as $mat-grid * 9 which is 72px. The component looks ugly and breaks a layout. Other datepicker components don’t define height and look normal.
I tried to override the height in my CSS by :host .main-content { height: auto !important} but as Angular adds some _ngcontent-rnp-XX classes to elements it doesn’t apply.
Does anybody know how to style material-date-range-picker height? (And why it is styled to have fixed height).
Solution
So you might want to try to use this mixin here which might work better for your environment. https://github.com/dart-lang/angular_components/blob/c644746d2824df7cfaf0a34f900b1f8557caddbc/angular_components/lib/material_datepicker/_mixins.scss#L221
You can also see how it sets the .main-content height by using :ng-deep. For Google products we don’t want people to customize using ng-deep as it makes everything part of public API which makes migrations hard, but it should be OK in this content.
We are going to look into providing a mixin for teams to set the height themselves in a more maintenance friendly manner.
I’m glad you like using the widgets, but I would ask that you take care with your criticism. This particular design works well for our products and many of our designers love it and thinks it looks beautiful. I understand it doesn’t work for your use case, but hopefully the customization outlined above will work for you.
Answered By – Ted Sander
Answer Checked By – Candace Johnson (FlutterFixes Volunteer)