弹出窗口中的Angular Daterangepicker未显示在正确的位置

Question

我正在使用ng2-daterangepicker在弹出窗口中显示日期范围选择器。

这是我到目前为止所做的：

styles: [ `

      main {
        padding: 1em;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 50px;
        display: block;
        max-width: 600px;
      }

    .well {
      min-height: 20px;
      margin-bottom: 20px;
      background-color: #EDEDED;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
      padding: 19px;
      border-width: 1px;
      border-style: solid;
      border-color: rgb(227, 227, 227);
      border-image: initial;
      border-radius: 4px;
    }

    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .containerDiv {
      margin: auto;
      width: 60%;
      padding: 10px;
    }

    .container { margin-right: auto; margin-left: auto; *zoom: 1;} 

    .label-primary {
      background-color: #337ab7;
    }

    .label {
      display: inline;
      padding: .2em .6em .3em;
      font-size: 100%;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25em;
    }

    p{
      display:inline;
      color: #595959; 
    }

    h3{
      color: #808080; 
    }

    span {
      font-size: xx-large; 
    }

    .center {
      text-align: center;
    }

    .glyphicon {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

  ` ]

我的风格是：

{{1}}

我看到onclick，范围选择器呈现在（0,0），因此弹出窗口的左侧和顶部值未被设置。

屏幕看起来像：

我试图将它包装在具有相对定位的div中，但这并没有解决问题。

有人可以为此建议修复吗？