How to center a popOver horizontally and vertically?

Questions
1

hi, how do i center a popOver without target element.
i tried to set it programmatically on popOver opened event , but there is a flicker because it first opens on top left then goes to center

2

Having the same issue. Trying to open a popover in the center of page. Using core (no React or Vue)

Anyone knows a solution for it?

3

popover never meant to be centered, as the name suggests, it pops over the event target
i used custom dialog for my case. its already centered and you can customize the width, height, bg …

4

Thanks. You are right that dialog is better suited to this kind of situation. Initially i did use dialog because from documentation is not clear that the content can be customized. I will take a look how can be customized.

In the mean time i did the following to center popover (its a method of a custom element / web component):

  selectAttendanceSessionClick() {
    const pageElement = this.querySelector('.page-content')
    const popoverWidth =
      parseInt(pageElement.style.getPropertyValue('--f7-popover-width'), 10) || 260
    const { offsetWidth: pageWidth, offsetHeight: pageHeight } = pageElement

    const targetX = Math.trunc((pageWidth - popoverWidth) / 2)
    const targetY = Math.trunc((pageHeight - 360) / 2)
    const popoverEl = this.querySelector('select-attendance-session-popover')

    this.selectAttendancePopover = this.$app.popover.create({
      el: popoverEl,
      targetX,
      targetY,
      on: {
        closed: async () => {
          await 0
          this.selectAttendancePopover.destroy()
        },
      },
    })
    this.selectAttendancePopover.open()
  }
5

Custom Dialog

html:

<div className="dialog custom-dialog">

    <div className="dialog-inner">

        <div className="dialog-title">
            Dialog Title
        </div>

        <div className="dialog-text">
            Dialog Text
        </div>

    </div>

    <div className="dialog-buttons">
	    <span className="dialog-button">Cancel</span>
	    <span className="dialog-button">OK</span>
    </div>

</div>

Instantiate:

const customDialog = f7.dialog.create({
    el: '.custom-dialog'
});

Customize Dialog:

.custom-dialog {
    width: 75%;
    ...
}