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 ?
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
Thanks @Marc . Here’s the github issue Full Screen option needed for GridStack components · Issue #5898 · holoviz/panel · GitHub
1 Like