[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

[filpunisher]

Thanks, this worked for me .tabs-content.carousel.carousel-slider .carousel-item.active{ position:relative; } .tabs-content.carousel.carousel-slider{ height: auto !important; } I added it in the materialize.min.css PS. there are

in the tabs

• © Githubissues.
• Githubissues is a development platform for aggregating issues.