Angular Dart Material Daterange picker heightAngular 2: How to style host element of the component?Angular Material dialog doesnt shrinkAngular material-expansionpanel title styleOverride Angular Material 2 MdDatepicker's top or left offset from triggerAngular 4 mat-form-field with mat-selectAngular material mat grid list not expandingUse custom header for material datepicker where Material version < 6 and Angular version < 6angular material bootstrap like grid mat-grid-listCustom Date Picker Based On MatDatePicker - Open Picker and Focus InputAngular Dart, material-input outline
If I stood next to a piece of metal heated to a million degrees, but in a perfect vacuum, would I feel hot?
Why are road bikes (not time trial bikes) used in many triathlons?
how many bits in the resultant hash will change, if the x bits are changed in its the original input
What powers the air required for pneumatic brakes in aircraft?
What could be reasoning of male prison in VR world to only allow undershirt and sarong as nightwear to male prisoners
(Piano) is the purpose of sheet music to be played along to? Or a guide for learning and reference during playing?
Why did Steve Rogers choose this character in Endgame?
Do dragons smell of lilacs?
How do I query for system views in a SQL Server database?
How to determine the optimal threshold to achieve the highest accuracy
How to ask my office to remove the pride decorations without appearing anti-LGBTQ?
Unix chat server making communication between terminals possible
How to say no to more work as a PhD student so I can graduate
Is it ethical for a company to ask its employees to move furniture on a weekend?
Is it rude to refer to janitors as 'floor people'?
How can I leave a car for someone if we can't meet in person?
Finding the package which provides a given command
Interviewing with an unmentioned 9 months of sick leave taken during a job
Kepler space telescope planets detection
What is the word for "event executor"?
Cauchy reals and Dedekind reals satisfy "the same mathematical theorems"
Mechanical puzzle ID: Ring, barbell, and four-holed panel
Using two linked programs, output ordinal numbers up to n
What impact would a dragon the size of Asia have on the environment?
Angular Dart Material Daterange picker height
Angular 2: How to style host element of the component?Angular Material dialog doesnt shrinkAngular material-expansionpanel title styleOverride Angular Material 2 MdDatepicker's top or left offset from triggerAngular 4 mat-form-field with mat-selectAngular material mat grid list not expandingUse custom header for material datepicker where Material version < 6 and Angular version < 6angular material bootstrap like grid mat-grid-listCustom Date Picker Based On MatDatePicker - Open Picker and Focus InputAngular Dart, material-input outline
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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).
dart angular-material2 angular-dart
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
add a comment |
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).
dart angular-material2 angular-dart
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
add a comment |
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).
dart angular-material2 angular-dart
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
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).
dart angular-material2 angular-dart
dart angular-material2 angular-dart
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
asked Mar 26 at 8:17
Martin EdlmanMartin Edlman
4605 silver badges9 bronze badges
4605 silver badges9 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55352552%2fangular-dart-material-daterange-picker-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
add a comment |
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 Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
add a comment |
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 Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
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 Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
answered Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
answered Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
answered Mar 27 at 3:05
Ted SanderTed Sander
1,5263 silver badges7 bronze badges
1,5263 silver badges7 bronze badges
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
add a comment |
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
Thank you Ted. Using mixin looks good, I'll try it. Sorry for the misunderstanding, by saying that the component looks ugly I just wanted to point out it looks differently and uses different definition than other date picker components. Which make it hard to use these together. But definitely Angular Dart and material components as a whole are great and that's why I use it.
– Martin Edlman
Mar 27 at 4:32
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55352552%2fangular-dart-material-daterange-picker-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
