Styjun

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;

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

share|improve this question

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

add a comment | 

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

share|improve this question

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 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

share|improve this question

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

share|improve this question

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

share|improve this question

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

asked Mar 26 at 8:17

Martin EdlmanMartin Edlman

46055 silver badges99 bronze badges

1 Answer
1

active

oldest

votes

1

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.

share|improve this answer

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 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
);



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

1

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.

share|improve this answer

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 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 | 

1

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.

share|improve this answer

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 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.

share|improve this answer

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 bronze badges

share|improve this answer

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 bronze badges

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 bronze badges

answered Mar 27 at 3:05

Ted SanderTed Sander

1,52633 silver badges77 bronze badges