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