Materialize: [1.0.0-alpha2] Swipeable tabs are not responsive to content

[Magiczne]

Expected Behavior

Tabs should be responsive to content

Current Behavior

Tabs are always 400px height

Steps to Reproduce (for bugs)

CodePen: https://codepen.io/anon/pen/BmvMVE

Your Environment

Version used: 1.0.0 alpha 2
Browser Name and version: Chrome 62.0.3202.94
Operating System and version (desktop or mobile): Windows 10

[Luke5]

A possible solution or rather workaround is to set the tabs-content height to auto using js kind of like this (css will not work as the _setCarouselHeight-function will dynamically reset the height):

$('.tabs-content.carousel.carousel-slider').css("height","auto");

and then set the current active tab to relative position while leaving the others absolute:

.tabs-content.carousel.carousel-slider .carousel-item.active{
    position: relative;
}

[LukeSavefrogs]

A possible solution or rather workaround is to set the tabs-content height to auto using js kind of like this (css will not work as the _setCarouselHeight-function will dynamically reset the height):

$('.tabs-content.carousel.carousel-slider').css("height","auto");

and then set the current active tab to relative position while leaving the others absolute:

.tabs-content.carousel.carousel-slider .carousel-item.active{
    position: relative;
}

WORKS PERFECTLY!
It's nice and clean... Thanks @Luke5 👍

Just for reference... If you have your CSS loaded after materialize's like me, another way of doing it without jQuery is to directly put into the code:
.tabs-content.carousel.carousel-slider{ height: auto !important; }

Thank you so much

[carlostighe]

Seems this is a continuing issue - https://github.com/Dogfalo/materialize/issues/4148, https://github.com/Dogfalo/materialize/issues/4159, among others but these seem to be the earlier issues

[opudupreye]

A possible solution or rather workaround is to set the tabs-content height to auto using js kind of like this (css will not work as the _setCarouselHeight-function will dynamically reset the height):

$('.tabs-content.carousel.carousel-slider').css("height","auto");

and then set the current active tab to relative position while leaving the others absolute:

.tabs-content.carousel.carousel-slider .carousel-item.active{
    position: relative;
}

WORKS PERFECTLY!
It's nice and clean... Thanks @Luke5 +1

Just for reference... If you have your CSS loaded after materialize's like me, another way of doing it without jQuery is to directly put into the code:
.tabs-content.carousel.carousel-slider{ height: auto !important; }

Thank you so much

.tabs-content.carousel.carousel-slider .carousel-item.active{
position: relative;
}

.tabs-content.carousel.carousel-slider{ height: auto !important; }

the addition of the two worked for me