# “View in fullscreen” button within Observable cell
**URL:** https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206
**Category:** Help
**Created:** [November 24, 2020, 9:20pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206 "2020-11-24T21:20:32Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@cornhundred](https://talk.observablehq.com/u/cornhundred)
#### Post date: [November 24, 2020, 9:20pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/1 "2020-11-24T21:20:32Z")
Is it possible for a button (e.g. [https://observablehq.com/@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs)) in an Observable notebook cell to switch to “View in fullscreen”?
For instance I have this [notebook](https://observablehq.com/@cornhundred/citibike-clustergrammer-gl-and-deck-gl) that has two visualizations that interact with each other and these can be arranged in portrait or landscape (using select input dropdown), but the landscape only works if the user also clicks the “View in fullscreen” option (which I think can be difficult for a user to find). It would be nice if switching to landscape also caused a switch to fullscreen (or if we could make a wider cell - [Support for larger cell max width?](https://talk.observablehq.com/t/support-for-larger-cell-max-width/2698/2)).
---
### Author:  [@severo](https://talk.observablehq.com/u/severo)
#### Post date: [November 24, 2020, 9:24pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/2 "2020-11-24T21:24:47Z")
Sure. I think [https://observablehq.com/@fil/fullscreen](https://observablehq.com/@fil/fullscreen) will help you.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 24, 2020, 9:39pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/3 "2020-11-24T21:39:21Z")
Also, to display the whole notebook in fullscreen (e.g. with a custom fullscreen layout):
> **[Fullscreen Layout Demo](https://observablehq.com/@mootari/fullscreen-layout-demo)**
>
> Custom fullscreen column layout, horizontally scrollable. Discussion: https://talk.observablehq.com/t/suggestions-for-live-monitor-use/2174 Observable: The User Manual 👋 Welcome to Observable — the home of magic notebooks for the web! There’s a lot...
---
### Author:  [@cornhundred](https://talk.observablehq.com/u/cornhundred)
#### Post date: [November 24, 2020, 9:57pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/4 "2020-11-24T21:57:03Z")
That’s great thanks @severo and @mootari! I’ll probably use the first implementation.
I’ll update on which method works best.
---
### Author:  [@cornhundred](https://talk.observablehq.com/u/cornhundred)
#### Post date: [November 25, 2020, 1:49am UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/5 "2020-11-25T01:49:34Z")
@mootari The fullscreen button works but it is doing something weird to the tooltip in my library Clustergrammer-GL
> **[CitiBike Clustergrammer-GL and Deck.gl : Fullscreen button](https://observablehq.com/@cornhundred/citibike-clustergrammer-gl-and-deck-gl-fullscreen-button)**
>
> click to show connections, need to color based on traffic Data Deck.gl Setup Clustergrammer-GL Setup Imports References https://observablehq.com/@nharrisanalyst/deck-gl References:...
I’ll update if I figure it out.
@severo the example notebook you shared appears to only make a single canvas fullscreen. I’ll have to see if I can get the html element to work with their example.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 25, 2020, 12:42pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/6 "2020-11-25T12:42:46Z")
> [@cornhundred](#):
>
> The fullscreen button works but it is doing something weird to the tooltip in my library Clustergrammer-GL
Can you be more specific, e.g. provide a screenshot?
---
### Author:  [@cornhundred](https://talk.observablehq.com/u/cornhundred)
#### Post date: [November 25, 2020, 1:57pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/7 "2020-11-25T13:57:27Z")
> [@mootari](#):
>
> Can you be more specific, e.g. provide a screenshot?
Sure, here are some screenshots comparing the behavior
### Observable fullscreen functionality: tooltip works normally
### Custom Fullscreen Button: tooltip not working normally
I am using absolute positioning for my CSS so it is probably getting modified somehow with the CSS changes from the fullscreen button. It looks like the top might be set too high.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [November 25, 2020, 6:41pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/8 "2020-11-25T18:41:00Z")
Look like you’re attaching the map and tooltip to the body, which causes them to receive CSS that was intended for Observable’s cell wrappers. You may want to get rid of most of CSS in the fullscreen() helper and instead apply your own, customized rules (e.g. using CSS grids).
---
### Author:  [@cornhundred](https://talk.observablehq.com/u/cornhundred)
#### Post date: [November 25, 2020, 10:57pm UTC](https://talk.observablehq.com/t/view-in-fullscreen-button-within-observable-cell/4206/9 "2020-11-25T22:57:22Z")
@mootari, you were correct I had to remove some of the CSS (turned off flex and disabled height and width which were causing the tooltip to be too tall or wide)
```
html.${className} body > div {
// display: flex; // disable in order ot have map show up
// flex-direction: col; // disable in order ot have map show up
// flex-wrap: wrap;
background: white;
// height: 100%; // causes tooltip to be too tall
width: auto;
overflow: auto;
position: relative;
}
html.${className} body > div > div {
margin-bottom: 0 !important;
min-height: 0 !important;
// width: 100vw; // causes tooltip to be too wide
max-height: 100%;
// overflow: auto;
// padding: .5rem;
// box-sizing: border-box;
}
```
Now I’m just working on a way to toggle my orientation between landscape/portrait when the fullscreen button is clicked.