“View in fullscreen” button within Observable cell

Is it possible for a button (e.g. https://observablehq.com/@jashkenas/inputs) in an Observable notebook cell to switch to “View in fullscreen”?

For instance I have this notebook 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?).

Sure. I think https://observablehq.com/@fil/fullscreen will help you.

2 Likes

Also, to display the whole notebook in fullscreen (e.g. with a custom fullscreen layout):

2 Likes

That’s great thanks @severo and @mootari! I’ll probably use the first implementation.

I’ll update on which method works best.

@mootari The fullscreen button works but it is doing something weird to the tooltip in my library Clustergrammer-GL

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.

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.

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).

1 Like

@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.