# How to add EuiFlyout to my custom plugin/application

**URL:** <https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715>\
**Category:** Kibana\
**Created:** [May 8, 2020, 12:08pm UTC](https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715 "2020-05-08T12:08:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![whitediver](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/whitediver/32/53736_2.png) [@whitediver](https://discuss.elastic.co/u/whitediver)\
**Post date:** [May 8, 2020, 12:08pm UTC](https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715/1 "2020-05-08T12:08:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dsnider](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dsnider/32/44068_2.png) [@dsnider](https://discuss.elastic.co/u/dsnider)\
**Post date:** [May 11, 2020, 4:56pm UTC](https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715/2 "2020-05-11T16:56:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![whitediver](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/whitediver/32/53736_2.png) [@whitediver](https://discuss.elastic.co/u/whitediver)\
**Post date:** [May 11, 2020, 8:05pm UTC](https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715/3 "2020-05-11T20:05:33Z")

</div>

Thanks a lot for idea.

I found this usage:

```auto
     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?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [June 8, 2020, 8:05pm UTC](https://discuss.elastic.co/t/how-to-add-euiflyout-to-my-custom-plugin-application/231715/4 "2020-06-08T20:05:34Z")

</div>

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