Full screen for GridStack components

Panel
1

There is a resize and drag options on the GridStack. Is there a way to allow for full screen (temporary with exit back to original size) ? If not, is there an easy way to do this using css ?

2

Hi @dwr-psandhu

The GridStack does not support full screen. You could post a feature request for it?

A workaround would be to build a general FullScreen container like the proof of concept below. I’ve been thinking a lot about this.

import panel as pn
import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension('gridstack')

CSS = """
:not(:root):fullscreen::backdrop {
    background: white;
}
.fullscreen-button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 24px;
  height: 24px;
  z-index: 10000;
  opacity: 0;
  transition-delay: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.fullscreen-button:hover {
  transition: 0.5s;
  opacity: 1;
}

.fullscreen-button:focus {
  opacity: 1;
}
.pn-container, .object-container {
    height: 100%;
    width: 100%;
}
"""

class FullScreen(ReactiveHTML):
    object = param.Parameter()

    def __init__(self, object, **params):
        super().__init__(object=object, **params)

    _template = """
<div id="pn-container" class="pn-container">
    <span id="button" class="fullscreen-button" onclick="${script('maximize')}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
    <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"></path>
        </svg>
    </span>
    <div id="object_el" class="object-container">${object}</div>
</div>
"""
    _stylesheets=[CSS]
    _scripts = {
        "maximize": """
function isFullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  )
}
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}
function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

function toggleFullScreen() {
  if (isFullScreen()) {
    exitFullScreen()
  } else {
    requestFullScreen(button.parentElement)
  }
}
toggleFullScreen()
"""
    }

gstack = pn.layout.GridStack(sizing_mode='stretch_both', min_height=600)

gstack[ : , 0: 3] = FullScreen(object=pn.Column("A", "B", sizing_mode="stretch_both", styles={"background": "salmon"}), )
gstack[0:2, 3: 9] = FullScreen(pn.Column("1", styles=dict(background='green'), sizing_mode="stretch_both"))
gstack[2:4, 6:12] = FullScreen(pn.Column("2", styles=dict(background='orange'), sizing_mode="stretch_both"))
gstack[4:6, 3:12] = FullScreen(pn.Column("3", styles=dict(background='blue'), sizing_mode="stretch_both"))
gstack[0:2, 9:12] = FullScreen(pn.Column("4", styles=dict(background='purple'), sizing_mode="stretch_both"))

gstack.servable()
1 Like
3

Thanks @Marc . Here’s the github issue Full Screen option needed for GridStack components · Issue #5898 · holoviz/panel · GitHub

1 Like
4

@Marc I have been using this full screen for a while. Its great but a couple of questions.

  1. Its not easy to find the full screen control as it appears only on hover
  2. When in full screen, there is no way to scroll ( i have multiple plots that can be long)

Finally, is there an issue to add this to panel?
Similarly, I like how the sidebar can collapse on some templates and again it would be nice to have that styling as opposed to the Cards that also support collabsible panels.

Thanks for all your great work!

1 Like