[MdDatepicker] Weird behavior when using inside of 'md-layout-item'

[dlhck]

Steps to reproduce

Place an md-datepicker component within a md-layout-item container.
Example:

<div class="md-layout md-gutter">
   <div class="md-layout-item md-size-20">
       <md-datepicker v-model="startDate">
           <label>Start</label>
       </md-datepicker>
   </div>
   <div class="md-layout-item md-size-20">
      <md-datepicker v-model="endDate">
         <label>End</label>
       </md-datepicker>
     </div>
</div>

Which browser?

Chrome, Firefox, Safari

What is expected?

What is actually happening?

[xxRockOnxx]

I am experiencing this too. However it's not because of md-layout. I have a form inside a card. When the card's width is less than 640px it acts weird.

[zapping]

@davidhoeck I tried pasting your snippet here, https://codesandbox.io/s/716w4q0k66 but could not find an issue.

[zapping]

@xxRockOnxx Tried it inside this card too, https://codesandbox.io/s/6jjm37288z , but could not replicate the issue.

[zapping]

@davidhoeck and @xxRockOnxx Sorry I do find it now when the resolution of my screen is changed. It seems to be a known issue #1794

[xxRockOnxx]

@zapping Im not sure but maybe yes. His problem is related width being dynamic, but settings width does not make any difference. I'll try setting the datepicker's width to be exact as the card's and see if it'll work.

[zapping]

I think its the height that is having issue. You probably need to set something like

  .md-datepicker-dialog {
    min-height: 286px;
    max-height: 286px;
  }

Have set this to the codesandbox and it positions correctly now.

[xxRockOnxx]

Thanks a lot! Will try that.

[xxRockOnxx]

@zapping tried. it worked. the dialog is in the right place and right size but on first open the buttons are not there.

[XuTheBunny]

Datepicker includes "md-field" class, and that class has the default setting for width is 100%.
I overwrite mine as before for the component that contains datepicker specifically.
.md-field {
width: auto;
}

[nidilasi]

I changed my code from

<div class="md-layout-item md-size-20">
   <md-datepicker :key="'date_picker_' + mode" ref="datepicker" v-model="selected.date"/>
</div>

to

<div>
   <md-datepicker :key="'date_picker_' + mode" ref="datepicker" v-model="selected.date"/>
</div>

and afterwards I had no positioning and size issues anymore...