How to add EuiFlyout to my custom plugin/application

I create my own visualization and application for the Kibana.
I added EuiFlyout inside the EuiPageBody/EuiPage/EuiPageContent.
Each time I get the same results:

  • the flyout element covered by the general Kibana page header
  • if ownFocus attribute is set the Flyout is under the euiOverlayMask

Kibana version 7.3

How to add the flyout? Should I use the FlyoutService? How to use it?

Generally you want EuiFlyout to be wrapped inside EuiPortal. This should help it not compete against any other masks, since it will be nested within the dom.

1 Like

Thanks a lot for idea.

I found this usage:

     this.flyoutRef = npStart.core.overlays.openFlyout(
      <EventsFlyOut
        httpClient={this.props.httpClient}
        onCloseFlyOut={this.handleCloseFlyOut}
        selectedRow={value}
      />,
      {
        size: 's',
        ownFocus: true
      } );

Is it correct way to add flyout?