How to add EuiFlyout to my custom plugin/application

Elastic Stack Kibana
1

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?

2

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
3

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?

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.