Using Muuri Javascript Library With Bootstrap Tabs - Won't Expand Unless Page Resized?

Question

I've been struggling with this for days and am frustrated and hope that someone on here could really help me solve this mystery. So I have a simple concept going where I have three Bootstrap 4 tabs and want to add drag and drop functionality to the contents inside of them with a responsive stacked masonry design. For this, I am using Muuri since it's the best that I've seen for this since I'm not very proficient with Javascript in general.

The problem I'm having is that the contents inside the tabs are not "deploying" so to speak where they expand out into the masonry design, they're stacked on top of each other unless I resize the window with that tab active. In that case, they "deploy" properly and they look good and drag and drop just fine. Although, I notice the other tabs' contents will revert back to stacking the contents on top of themselves again, making them unreadable, but they will "deploy" again if the window is resized. It's really frustrating.

Here's my demo codepen project below to illustrate what I'm talking about. If I ditch the Bootstrap tabs and just have a bunch of Muuri grids on a single page everything works terrific, it's just an issue with these tabs. Can anyone figure out what's going on here? I'm really pulling my hair out on this one since it just doesn't make any sense to me. The tabs are critical to my website's design and functionality so they can't go.

Thanks in advance!

https://codepen.io/rcnjstudent/pen/xxEagGO

HTML Snippet

  
    
      
        Tab 1
      
      
        Tab 2
      
      
        Tab 3
      
    
  

  
    

      
        
          

            
              
                
                  I'm from tab 1, div 1

                
              
            
            
              
                
                  I'm from tab 1, div 2
                
              
            
            
              
                
                  I'm from tab 1, div 3
                
              
            
            
              
                
                  I'm from tab 1, div 4
                
              
            
          
        
      
      
        
          

            
              
                
                  I'm from tab 2, div 1
                
              
            
            
              
                
                  I'm from tab 2, div 2
                  
                
              
            
            
              
                
                  I'm from tab 2, div 3
                
              
            
          
        
      
      
        
          

            
              
                
                  I'm from tab 3, div 1
                
              
            
            
              
                
                  I'm from tab 3, div 2
                
              
            
            
              
                
                  I'm from tab 3, div 3

CSS Snippet

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

Javascript

$(document).ready(function () {
  var muuriGrid1;
  var muuriGrid2;
  var muuriGrid3;

  function startMuuri() {
    if (typeof muuriGrid1 === "undefined") {
      muuriGrid1 = new Muuri(".grid-1", {
        dragEnabled: true
      });

      console.log("muuriGrid1 activated");
    } else {
      console.log(
        "muuriGrid1 already has been activated and cannot be activated again!"
      );
    }

    if (typeof muuriGrid2 === "undefined") {
      muuriGrid2 = new Muuri(".grid-2", {
        dragEnabled: true
      });

      console.log("muuriGrid2 activated");
    } else {
      console.log(
        "muuriGrid2 already has been activated and cannot be activated again!"
      );
    }

    if (typeof muuriGrid3 === "undefined") {
      muuriGrid3 = new Muuri(".grid-3", {
        dragEnabled: true
      });

      console.log("muuriGrid3 activated");
    } else {
      console.log(
        "muuriGrid3 already has been activated and cannot be activated again!"
      );
    }
  }

  startMuuri();

  $(".container-tabs ul li").click(function () {
    //Captures the id of the group item so we can track what we're working with later
    console.log($(this).attr("data-group-item-id"));
  });
});

Emy · Accepted Answer

I hope the solution will help you use display: block for (.tab-pane)

$(document).ready(function () {
  var muuriGrid1;
  var muuriGrid2;
  var muuriGrid3;

  function startMuuri() {
    if (typeof muuriGrid1 === "undefined") {
      muuriGrid1 = new Muuri(".grid-1", {
        dragEnabled: true
      });

      console.log("muuriGrid1 activated");
    } else {
      console.log(
        "muuriGrid1 already has been activated and cannot be activated again!"
      );
    }

    if (typeof muuriGrid2 === "undefined") {
      muuriGrid2 = new Muuri(".grid-2", {
        dragEnabled: true
      });

      console.log("muuriGrid2 activated");
    } else {
      console.log(
        "muuriGrid2 already has been activated and cannot be activated again!"
      );
    }

    if (typeof muuriGrid3 === "undefined") {
      muuriGrid3 = new Muuri(".grid-3", {
        dragEnabled: true
      });

      console.log("muuriGrid3 activated");
    } else {
      console.log(
        "muuriGrid3 already has been activated and cannot be activated again!"
      );
    }
  }
  startMuuri();

  $(".container-tabs ul li").click(function () {
    console.log($(this).attr("data-group-item-id"));
  });
  
});

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.tab-pane {
  display: block !important;
}
.tab-pane.active {
  opacity: 1;
  height: auto;
  z-index: 0;
}
.tab-pane:not(.active) {
  opacity: 0;
  height: 0;
  z-index: 9;
}





  
    
      
        Tab 1
      
      
        Tab 2
      
      
        Tab 3
      
    
  

  
    

      
        
          

            
              
                
                  I'm from tab 1, div 1

                
              
            
            
              
                
                  I'm from tab 1, div 2
                
              
            
            
              
                
                  I'm from tab 1, div 3
                
              
            
            
              
                
                  I'm from tab 1, div 4
                
              
            
          
        
      
      
        
          

            
              
                
                  I'm from tab 2, div 1
                
              
            
            
              
                
                  I'm from tab 2, div 2
                  
                
              
            
            
              
                
                  I'm from tab 2, div 3
                
              
            
          
        
      
      
        
          

            
              
                
                  I'm from tab 3, div 1
                
              
            
            
              
                
                  I'm from tab 3, div 2
                
              
            
            
              
                
                  I'm from tab 3, div 3

Using Muuri Javascript Library With Bootstrap Tabs - Won't Expand Unless Page Resized?

Answers (1)

Related Questions

Using Muuri Javascript Library With Bootstrap Tabs - Won&#39;t Expand Unless Page Resized?

Answers (1)

Related Questions

Using Muuri Javascript Library With Bootstrap Tabs - Won't Expand Unless Page Resized?