title: Material design - Calender alignment insider a card-reveal module
body: <p>I have been working on a Material design web layout to create a dashboard for my application. I am using a card reveal module to display a form field where user will be able to update his/her date of birth. For this I am using material design date picker inside the card reveal box But I am seeing the calender appearing and confining its position only inside card reveal. Anyone saw this problem? Any thoughts?</p>
  
  <p><a href="https://i.stack.imgur.com/w2oXE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w2oXE.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Adding Code</strong></p>
  
  <pre><code>&lt;div class="col s12 m12 l6 right"&gt;
                                  &lt;!--code for displaying employee details--&gt;
                                  &lt;div id="profile-card" class="card" style="overflow: hidden;"&gt;
                                      &lt;div class="card-image waves-effect waves-block waves-light"&gt;
                                          &lt;img class="activator" src="assets/images/_userbg.jpg" alt="user background"&gt;&lt;span class="dddd_client_name card-title activator grey-text text-darken-4"&gt;Chethan Kumar&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class="card-content"&gt;
                                          &lt;img src="assets/images/avatar.jpg" alt="" class="circle responsive-img activator card-profile-image"&gt;
                                          &lt;a class="btn-floating activator btn-move-up waves-effect waves-light light-blue accent-3 right"&gt;
                                              &lt;i class="mdi mdi-pencil"&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                          &lt;div class="col s12 m12 l12"&gt;
                                              &lt;div class="col s12 m6 l6 dddd_client_detail"&gt;
                                                  &lt;i class="btn-floating mdi mdi-account-card-details white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;Emp ID: 1234567&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m6 l6 dddd_client_detail"&gt;
                                                  &lt;i class="btn-floating mdi mdi-phone white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;+91 999 999 9999&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m6 l6 dddd_client_detail"&gt;
                                                  &lt;i class="btn-floating mdi mdi-account white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;Male&lt;/span&gt;  
                                              &lt;/div&gt;
  
                                              &lt;div class="col s12 m6 l6 dddd_client_detail"&gt;
                                                  &lt;i class="btn-floating mdi mdi-cake-variant white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;01/07/1989&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m12 l12 dddd_client_detail"&gt;
                                                  &lt;i class="btn-floating mdi mdi-email-outline white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;mail@domain.com&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m6 l6 dddd_client_detail hide"&gt;
                                                  &lt;i class="btn-floating mdi mdi-account white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;Band: H &amp;amp; Below&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m6 l6 dddd_client_detail hide"&gt;
                                                  &lt;i class="btn-floating mdi mdi-currency-inr white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;Sum Insured: 2,00,000&lt;/span&gt;  
                                              &lt;/div&gt;
                                              &lt;div class="col s12 m12 l12 dddd_client_detail hide"&gt;
                                                  &lt;i class="btn-floating mdi mdi-clock white-text text-darken-2"&gt;&lt;/i&gt; &lt;span&gt;Coverage Inception Date: 07/11/2016&lt;/span&gt;  
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
  
  
                                      &lt;/div&gt;
                                      &lt;div class="card-reveal" id="empformcard" style="display: block; transform: translateY(-100%);"&gt;
                                          &lt;span class="card-title grey-text text-darken-4"&gt;&lt;i class="mdi mdi-close right"&gt;&lt;/i&gt;&lt;/span&gt;
  
                                          &lt;h4 class="client_edit_title"&gt;You can edit your details here.&lt;/h4&gt;
                                          &lt;div class="col s12 m12 l12"&gt;
                                              &lt;form id="edit_profile" class="col s12 m12 l12 form-validate"&gt;
                                                  &lt;div class="input-field col s12 m12 l12"&gt;
                                                      &lt;i class="mdi mdi-phone prefix"&gt;&lt;/i&gt;
                                                      &lt;input id="dob" type="date" class="validate datepicker picker__input picker__input--active" required="" readonly="" tabindex="-1" aria-haspopup="true" aria-expanded="true" aria-readonly="false" aria-owns="username_root"&gt;&lt;div class="picker picker--focused picker--opened" id="username_root" tabindex="0" aria-hidden="false"&gt;&lt;div class="picker__holder"&gt;&lt;div class="picker__frame"&gt;&lt;div class="picker__wrap"&gt;&lt;div class="picker__box"&gt;&lt;div class="picker__date-display"&gt;&lt;div class="picker__weekday-display"&gt;Tuesday&lt;/div&gt;&lt;div class="picker__month-display"&gt;&lt;div&gt;Dec&lt;/div&gt;&lt;/div&gt;&lt;div class="picker__day-display"&gt;&lt;div&gt;20&lt;/div&gt;&lt;/div&gt;&lt;div class="picker__year-display"&gt;&lt;div&gt;2016&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="picker__calendar-container"&gt;&lt;div class="picker__header"&gt;&lt;select class="picker__select--month browser-default" aria-controls="username_table" title="Select a month"&gt;&lt;option value="0"&gt;January&lt;/option&gt;&lt;option value="1"&gt;February&lt;/option&gt;&lt;option value="2"&gt;March&lt;/option&gt;&lt;option value="3"&gt;April&lt;/option&gt;&lt;option value="4"&gt;May&lt;/option&gt;&lt;option value="5"&gt;June&lt;/option&gt;&lt;option value="6"&gt;July&lt;/option&gt;&lt;option value="7"&gt;August&lt;/option&gt;&lt;option value="8"&gt;September&lt;/option&gt;&lt;option value="9"&gt;October&lt;/option&gt;&lt;option value="10"&gt;November&lt;/option&gt;&lt;option value="11" selected=""&gt;December&lt;/option&gt;&lt;/select&gt;&lt;select class="picker__select--year browser-default" aria-controls="username_table" title="Select a year"&gt;&lt;option value="2009"&gt;2009&lt;/option&gt;&lt;option value="2010"&gt;2010&lt;/option&gt;&lt;option value="2011"&gt;2011&lt;/option&gt;&lt;option value="2012"&gt;2012&lt;/option&gt;&lt;option value="2013"&gt;2013&lt;/option&gt;&lt;option value="2014"&gt;2014&lt;/option&gt;&lt;option value="2015"&gt;2015&lt;/option&gt;&lt;option value="2016" selected=""&gt;2016&lt;/option&gt;&lt;option value="2017"&gt;2017&lt;/option&gt;&lt;option value="2018"&gt;2018&lt;/option&gt;&lt;option value="2019"&gt;2019&lt;/option&gt;&lt;option value="2020"&gt;2020&lt;/option&gt;&lt;option value="2021"&gt;2021&lt;/option&gt;&lt;option value="2022"&gt;2022&lt;/option&gt;&lt;option value="2023"&gt;2023&lt;/option&gt;&lt;/select&gt;&lt;div class="picker__nav--prev" data-nav="-1" role="button" aria-controls="username_table" title="Previous month"&gt; &lt;/div&gt;&lt;div class="picker__nav--next" data-nav="1" role="button" aria-controls="username_table" title="Next month"&gt; &lt;/div&gt;&lt;/div&gt;&lt;table class="picker__table" id="username_table" role="grid" aria-controls="username" aria-readonly="true"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class="picker__weekday" scope="col" title="Sunday"&gt;S&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Monday"&gt;M&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Tuesday"&gt;T&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Wednesday"&gt;W&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Thursday"&gt;T&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Friday"&gt;F&lt;/th&gt;&lt;th class="picker__weekday" scope="col" title="Saturday"&gt;S&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1480185000000" role="gridcell" aria-label="27 November, 2016"&gt;27&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1480271400000" role="gridcell" aria-label="28 November, 2016"&gt;28&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1480357800000" role="gridcell" aria-label="29 November, 2016"&gt;29&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1480444200000" role="gridcell" aria-label="30 November, 2016"&gt;30&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480530600000" role="gridcell" aria-label="1 December, 2016"&gt;1&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480617000000" role="gridcell" aria-label="2 December, 2016"&gt;2&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480703400000" role="gridcell" aria-label="3 December, 2016"&gt;3&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480789800000" role="gridcell" aria-label="4 December, 2016"&gt;4&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480876200000" role="gridcell" aria-label="5 December, 2016"&gt;5&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1480962600000" role="gridcell" aria-label="6 December, 2016"&gt;6&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481049000000" role="gridcell" aria-label="7 December, 2016"&gt;7&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481135400000" role="gridcell" aria-label="8 December, 2016"&gt;8&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481221800000" role="gridcell" aria-label="9 December, 2016"&gt;9&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481308200000" role="gridcell" aria-label="10 December, 2016"&gt;10&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481394600000" role="gridcell" aria-label="11 December, 2016"&gt;11&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481481000000" role="gridcell" aria-label="12 December, 2016"&gt;12&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481567400000" role="gridcell" aria-label="13 December, 2016"&gt;13&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481653800000" role="gridcell" aria-label="14 December, 2016"&gt;14&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481740200000" role="gridcell" aria-label="15 December, 2016"&gt;15&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481826600000" role="gridcell" aria-label="16 December, 2016"&gt;16&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481913000000" role="gridcell" aria-label="17 December, 2016"&gt;17&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1481999400000" role="gridcell" aria-label="18 December, 2016"&gt;18&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482085800000" role="gridcell" aria-label="19 December, 2016"&gt;19&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus picker__day--today picker__day--highlighted" data-pick="1482172200000" role="gridcell" aria-label="20 December, 2016" aria-activedescendant="true"&gt;20&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482258600000" role="gridcell" aria-label="21 December, 2016"&gt;21&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482345000000" role="gridcell" aria-label="22 December, 2016"&gt;22&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482431400000" role="gridcell" aria-label="23 December, 2016"&gt;23&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482517800000" role="gridcell" aria-label="24 December, 2016"&gt;24&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482604200000" role="gridcell" aria-label="25 December, 2016"&gt;25&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482690600000" role="gridcell" aria-label="26 December, 2016"&gt;26&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482777000000" role="gridcell" aria-label="27 December, 2016"&gt;27&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482863400000" role="gridcell" aria-label="28 December, 2016"&gt;28&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1482949800000" role="gridcell" aria-label="29 December, 2016"&gt;29&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1483036200000" role="gridcell" aria-label="30 December, 2016"&gt;30&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--infocus" data-pick="1483122600000" role="gridcell" aria-label="31 December, 2016"&gt;31&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483209000000" role="gridcell" aria-label="1 January, 2017"&gt;1&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483295400000" role="gridcell" aria-label="2 January, 2017"&gt;2&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483381800000" role="gridcell" aria-label="3 January, 2017"&gt;3&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483468200000" role="gridcell" aria-label="4 January, 2017"&gt;4&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483554600000" role="gridcell" aria-label="5 January, 2017"&gt;5&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483641000000" role="gridcell" aria-label="6 January, 2017"&gt;6&lt;/div&gt;&lt;/td&gt;&lt;td role="presentation"&gt;&lt;div class="picker__day picker__day--outfocus" data-pick="1483727400000" role="gridcell" aria-label="7 January, 2017"&gt;7&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div class="picker__footer"&gt;&lt;button class="btn-flat picker__today" type="button" data-pick="1482172200000" aria-controls="username"&gt;Today&lt;/button&gt;&lt;button class="btn-flat picker__clear" type="button" data-clear="1" aria-controls="username"&gt;Clear&lt;/button&gt;&lt;button class="btn-flat picker__close" type="button" data-close="true" aria-controls="username"&gt;Close&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
                                                      &lt;label for="dob" class=""&gt;Phone&lt;/label&gt;
                                                  &lt;/div&gt; 
                                                  &lt;div class="input-field col s12 m12 l12 savebox"&gt;
                                                      &lt;button type="submit" id="save_profile" class="btn tooltipped waves-effect waves-light col s12 m12 dddd_logbtn" data-position="left" data-delay="50" data-tooltip="Click here to save" data-tooltip-id="c6e38560-2469-0651-3cc1-511059fe4b63"&gt;Save &lt;i class="mdi mdi-content-save"&gt;&lt;/i&gt;&lt;/button&gt;
  
                                                      &lt;div class="lgauthload"&gt;
  
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/form&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  </code></pre>