App drawer hider part of the datetime picker

[sudipta1411]

Very nice element. Just a minor issue. I am using the datetime-picker in app drawer

<app-drawer-layout id="drawerLayout" force-narrow> <app-drawer id="startDrawer" align="start" slot='drawer' persistent no-focus-trap> <div style="height: 100%; overflow: auto;"> <my-element></my-element> </div> </app-drawer> And in I have something like this <div style="display: flex"> <datetime-picker horizontal-align="{{horizontalAlign}}"></datetime-picker> </div>

But the output is something like this Parts of the datetime picler is hidden by the drawer itself. How to solve this? Thank you, p.s. Sorry for the poor formatting

[fooloomanzoo]

The picker is positioned absolutely to the datetime-input so there is not enough space:

1. you could set a min-width of the app-drawer, that is higher than the width of the picker (the picker should be consistently in its width too).
2. you could set "horizontal-align", if you are having still space on the other side.
3. you could try to use <overlay-datetime-picker> and that should position the picker from an outer context.

Let me know if any of these points solved your problem

[sudipta1411]

Thanks for the reply. The third option works. (I am using polymer 2) <overlay-datetime-picker auto-confirm no-overlap date="{{date}}" time="{{time}}"></overlay-datetime-picker> But now the time field does not work. And no option to change the year.

[sudipta1411]

I have also used the following standalone code. The problem still remains.

  <!--base href="https://raw-dot-custom-elements.appspot.com/fooloomanzoo/datetime-picker/2.7.7/datetime-picker/"-->
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="overlay-datetime-picker.html">
    <link rel="import" href="bower_components/datetime-picker/datetime-picker.html">
    <link rel="import" href="bower_components/datetime-picker/overlay-datetime-picker.html">
    <style>
    html {
        font-family: 'Source Sans Pro', sans-serif;
    }
     overlay-datetime-picker.custom {
                   --input-background: white;
                   --input-color: black;
                   --input-focus-background: blue;

    </style>
   <!-- calendar-element is a sub-element of datetime-picker, which is more compact -->
   <dom-bind>
  <template is="dom-bind">
          <overlay-datetime-picker datetime="{{datetime}}"class='custom'></overlay-datetime-picker>
          <p>date: [[datetime]]</p>
            </template>
   </dom-bind>

But when I un comment the very first line, everything works fine.

[fooloomanzoo]

There were some changes in sizing the number-input. In the newest version 2.8.2 everything should be fixed. Consider the style-property changes (--input-picker-color and --input-picker-background define now the apperance of the picker). Please update by bower update -f