p-overlayPanel behaving like common Dialog

[st-clair-clarke]

Hi,




age.component.html

Code: Select all

  <button
      type = 'text'
      pButton
      label = 'Age'
      icon = 'ui-icon-error-outline'
      iconPos = 'right'

      (click) = 'op.toggle($event)'></button>

Code: Select all

<p-overlayPanel
      #op
      [dismissable] = 'false'
      [showCloseIcon] = 'true'>
    <div
        class = 'card card-w-title shadow-box ui-shadow-5'>
      <h2>Age</h2>

      <div layout-margin>
        <section [ngStyle] = "{'margin-bottom': '10px'}">
        <span [ngStyle] = "{'margin-right': '6px'}">Date of birth</span>
          <input
              type = 'date'
              formControlName = 'dobCalendar'>
        </section>
        <section>
          <span>Date of death</span>
          <input
              type = 'date'
              formControlName = 'dodCalendar'>
        </section>
      </div>

...

The overlay displays with its contents, but the dialogue is placed in the middle of the page and NOT DIRECTLY under the button as displayed at http://www.primefaces.org/primeng/#/overlaypanel

I am using Ultima and "primeng": "^1.0.0-beta.19"

Please see https://github.com/primefaces/primeng/issues/1086 for an image displaying the issue.

Thanks for any help.