# Implementing Fullscreen in a Kibana plugin

**URL:** <https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849>\
**Category:** Kibana\
**Created:** [April 20, 2020, 11:04am UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849 "2020-04-20T11:04:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 11:04am UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/1 "2020-04-20T11:04:58Z")

</div>

Hi there,

I need to implement a full screen feature inside a kibana plugin, like to the dashboard full screen (without header and sidebar)

I tryed to use the code describe in the " Fullscreen demo" from eui library, without success.

Can someone help me?

Thanks,  
Nicola

---

<div class="post-metadata">

**Author:** ![dosant](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dosant/32/64489_2.png) [@dosant](https://discuss.elastic.co/u/dosant)\
**Post date:** [April 20, 2020, 11:53am UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/2 "2020-04-20T11:53:44Z")

</div>

Hi @Nicolap,

In general I'd recommend to explore dashboard's code.

> **[elastic/kibana](https://github.com/elastic/kibana/tree/master/src/plugins/dashboard/public)**
>
> Your window into the Elastic Stack. Contribute to elastic/kibana development by creating an account on GitHub.

Specifically, this is the place where dashboard is hiding header and sidebar (we call it `chrome`):  
[Usage](https://github.com/elastic/kibana/blob/master/src/plugins/dashboard/public/plugin.tsx#L156) and [Docs](https://github.com/elastic/kibana/blob/a2c002d13030d5db2252d00983927ab8e21fe7e9/docs/development/core/public/kibana-plugin-core-public.chromestart.setisvisible.md)

Hope this is helpful.

---

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 12:38pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/3 "2020-04-20T12:38:11Z")

</div>

Thanks @dosant for the tip 🙂

Seeing the code It seems that I need to require the **CoreSetup** from _'src/core/public'_  
How can I include this in my plugin?

---

<div class="post-metadata">

**Author:** ![dosant](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dosant/32/64489_2.png) [@dosant](https://discuss.elastic.co/u/dosant)\
**Post date:** [April 20, 2020, 12:42pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/4 "2020-04-20T12:42:42Z")

</div>

@Nicolap, `chrome` is a service on core's `start` contract. It is be passed into your plugin in start hook. This is where it happens in dashboard: [https://github.com/elastic/kibana/blob/master/src/plugins/dashboard/public/plugin.tsx#L292](https://github.com/elastic/kibana/blob/master/src/plugins/dashboard/public/plugin.tsx#L292)  
From that point `setVisible` is accessible as `core.chrome.setVisible`

---

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 12:55pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/5 "2020-04-20T12:55:26Z")

</div>

I did not understand very well..

However, I just tried with the following code and It seems works:

```auto
import chrome from "ui/chrome";
...
chrome.setVisible(false);

```

What do you think about it?

---

<div class="post-metadata">

**Author:** ![dosant](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dosant/32/64489_2.png) [@dosant](https://discuss.elastic.co/u/dosant)\
**Post date:** [April 20, 2020, 1:09pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/6 "2020-04-20T13:09:56Z")

</div>

Got it, looks like your plugin uses older apis for creating plugins. If this is the case, then yes,

```auto
import chrome from "ui/chrome";
...
chrome.setVisible(false);

```

should be good 👍

---

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 1:13pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/7 "2020-04-20T13:13:23Z")

</div>

Maybe the following code is better:

```auto
import { npStart } from "ui/new_platform";
npStart.core.chrome.setIsVisible(false);

```

In both cases, using **puppeteer** to create a PDF by url It seems skip this rule...uhmmm

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [April 20, 2020, 1:15pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/8 "2020-04-20T13:15:31Z")

</div>

As @dosant says this will work for now, but this api will go away soon (probably before the next major release 8.0). If you are building for the future, it's highly recommended to switch to Kibana platform plugins. When you are creating a plugin with the [plugin generator](https://github.com/elastic/kibana/tree/master/packages/kbn-plugin-generator) it will set up everything correctly - the most important thing is a central plugin class that gets passed in the setup and start services in the respective lifecycle methods. You can learn about this new more structured way of building Kibana plugins in [https://github.com/elastic/kibana/blob/master/src/core/CONVENTIONS.md#technical-conventions](https://github.com/elastic/kibana/blob/master/src/core/CONVENTIONS.md#technical-conventions)

---

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 1:29pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/9 "2020-04-20T13:29:24Z")

</div>

Thanks @flash1293, this is very useful !  
I used the plugin generator one month ago and I don't have for example kibana.json at the top.  
It has been recently updated ?

Going back to the problem, you know if using chrome in the backend with puppeteer is there some problem?

In the picture below is the result from a puppeteer run (using chrome.setIsVisible(false) in the frontend)

 ![Immagine](https://us1.discourse-cdn.com/elastic/original/3X/e/1/e1db165b889216faf4664dd8350c3b3fc6dc9a60.png)

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [April 20, 2020, 2:02pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/10 "2020-04-20T14:02:43Z")

</div>

When you are looking for examples, check out the plugins in `src/plugins` - they all have `kibana.json` files specifying their dependencies.

About your puppeteer run - maybe it is screenshotting too early and your plugin didn't have time yet to hide the chrome? Very hard to help here effectively without the code or a minimal example to reproduce.

---

<div class="post-metadata">

**Author:** ![Nicolap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicolap/32/64933_2.png) [@Nicolap](https://discuss.elastic.co/u/Nicolap)\
**Post date:** [April 20, 2020, 2:10pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/11 "2020-04-20T14:10:31Z")

</div>

@flash1293 you are right...

Anyway, the main problem I asked in this topic is solved 🙂

From the puppeteer side, using the code below I got the same result  
that I wanted:

```auto
await page.addStyleTag({

        content: ".euiHeader{display: none};",

      });

      await page.addStyleTag({

        content: ".euiNavDrawer{display: none};",

      });

      await page.addStyleTag({

        content:

          ".chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome){top: 0px};",

      });

```

Thanks again to everyone

---

<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:** [May 18, 2020, 2:10pm UTC](https://discuss.elastic.co/t/implementing-fullscreen-in-a-kibana-plugin/228849/12 "2020-05-18T14:10:35Z")

</div>

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