Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display a grid item in full screen #571

Open
glalloue opened this issue Oct 1, 2024 · 0 comments
Open

Display a grid item in full screen #571

glalloue opened this issue Oct 1, 2024 · 0 comments

Comments

@glalloue
Copy link

glalloue commented Oct 1, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant