Solvedmaterialize Swipeable tabs carousel height limited to 400px

The .carousel div is limited to a height of 400px.
Sometimes, an ever smaller height is forced with a style attribute.
This is actually to small for the content I want to show under the tabs.
The issue:
Why is it limited to 400px? How can I fix this?

Thank you for your response.

The problem is that the swipeable tabs are styled by the carousel css. Reference #4148 .
In materialize.css change:
.tabs-content.carousel { height: 100%; overflow-x:hidden; overflow-y: scroll; } .tabs-content.carousel .carousel-item { width: 100%; height: 100%; } html,body{ overflow:hidden; height:100%; }

@Blaconix @gillesbs

Set the height and width properties of the selector .tabs-content.carousel .carousel-item to whatever you want the width and height to be.

Then in a document ready function, change the height of the container to be whatever the height of the content is with a statement similar to:
document.querySelector('.tabs-content.carousel').style.height = window.innerHeight + "px";

This is a dirty fix but it does work. :)

Add this to your .css file
.tabs-content.carousel .carousel-item { height:auto; }

Then this to your .js file (jquery)

$(function(){
resizeTab();
$( window ).resize(function() { resizeTab(); });
});
function resizeTab(){
var maxHeight = 0;
$('.carousel-item').each(function(){
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$(".tabs-content").css('height',maxHeight+'px');
}
This js resize the tabs parent to the tallest child on its initialization, and when the window is resized.

With that last fix, i noticed that when each tab is a different size with cards and rows, that it takes in the size with the most rows and adjusts all of the tabs. I made a few alterations to the javascript so it bases the height to what is being show at the time.

CSS is the same

Javascript

<script>
  $(document).ready(function(){
    $('.tabs').tabs({swipeable: true, onShow: resizeTab});
    
    $( window ).resize(function() { resizeTab(); });
  });

  function resizeTab(){
    $(".tabs-content").css('height',$('.carousel-item.active').height()+'px');
  }
</script>

same question: why is this closed? It's still an issue. I can't read the text in the tabs, nor can i find out why it happens at all.

I can set the height at 100%, but even so it won't go above 520px in height. No idea why that is :(

This is a dirty fix but it does work. :)

Add this to your .css file
.tabs-content.carousel .carousel-item { height:auto; }

Then this to your .js file (jquery)

$(function(){
    resizeTab();
    $( window ).resize(function() { resizeTab(); });
});
function resizeTab(){
    var maxHeight = 0;
    $('.carousel-item').each(function(){ 
         if($(this).height() > maxHeight) maxHeight = $(this).height(); 
    });
    $(".tabs-content").css('height',maxHeight+'px');
}

This js resize the tabs parent to the tallest child on its initialization, and when the window is resized.