muuri
muuri copied to clipboard
Display a grid item in full screen
I try to display one item on the grid in fullscreen by clicking on a button.
To do that i add css styles to the item that i want to open in fullscreen :
.fullscreen {
z-index: 103 !important;
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
overflow: auto !important;
margin: 0 !important;
}
But, because of the "transform" style set by muuri, i cannot open it in fullscreen. So, i created 2 events in my code to disable "transform" style only when fullscreen mode is activated
- Click on fullscreen button :
this._grid.getItems().forEach((item) => {
const itemElem = item.getElement();
if(itemElem.querySelector('#' + elemID)) {
const transformValueBackup = itemElem.style.transform;
itemElem.style.transform = 'unset !important';
this._fullscreenOpenerItem = {
item: itemElem,
transformValue: transformValueBackup
};
}
});
- Click on button to close fullscreen :
if (!this.isEmpty(this._fullscreenOpenerItem)) {
this._fullscreenOpenerItem.item.style.transform = this._fullscreenOpenerItem.transformValue;
}
But even with that, the fullscreen mode doesn't work. I think that Muuri takes it as a change in size and therefore restarts the calculation automatically and will set the "transform" again after my modification.
How can I force muuri not to restart the calculation in this specific case?