Swipeable tabs carousel height limited to 400px

[gillesbs]

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.

[mchalakov]

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]

This doesn't work for me. I'm currently having the same issue, and when adding the above css, the tab content just gets height 0.

[ccunni3]

@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";

[arvidnilber]

Am I the only one who doesn't even find the .tabs-content.carousel .carousel-item line in the css file? I have the latest version...

[blaconix]

I just used this:
.tabs-content.carousel .carousel-item { height: 100%; }

In my custom css file.

[lyh424]

@mchalakov @blaconix setting the height to 100% just hides the tabs-content.carousel and carousel.item completely. Only a ___px setting will display the contents. My issue is that one of the tabs has a much longer height than the other tabs.

[fega]

Duplicate of #4148

[bradley-varol]

How can i make the slider use auto height?
Also, is there a way to add padding or something between slides?

[fega]

@braed give me some basic codepens and I will try to help you

[bradley-varol]

I don't know what you want me to codepen, but i just want a carousel with text, but with padding so that the text doesn't touch from slide to slide, and with auto height so that the carousel can change height from item to item. I don't want to use 400px (or any absolute value) for the height.

http://codepen.io/anon/pen/pPwKXy

[ericlormul]

I also spot another weird thing when using swipeable tabs. When you try add an img tag into a tab. The carousel's height becomes 0, making the carousel disappear.

To reproduce it,
add <img src="path" alt="" /> into any tab, in @braed 's codepen, http://codepen.io/anon/pen/pPwKXy

[bradley-varol]

I'd also like to see the indicators become something we can add ourselves.
Take a look at my wireframe here and you can see that i'd like the indicators to be in the heading and not overlaying the carousel. Granted, that's easy enough with absolute positioning and media queries to retain responsiveness, but it would be nice to have these as something we could add ourselves, where we wanted them, and then just use data attributes to link them to specific carousels.
I'm likely asking far too much of this framework at this point, but if anyone knows a more efficient way to do this than with absolute positioning, let me know!

[bradley-varol]

Also, on a more realistic note, can we expect to see carousels given auto-scroll soon? Every other carousel has this and although it's relatively easy to implement with JS, why is it not already a feature?

[dibyanshusinha]

Isn't it bug that image issue followed by that limited width.
Why is this closed ?? Is there a way around ??
I was trying to create a testimonial using carousel and I can't find any easy way to do it. I needed just one logo on top with some text below it. Now I can't have the image in carousel-slider and the fixed height 400px is just too large for my case.
Thanks

[Badlapje]

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 :(

[AugmentBLU]

I'm getting the same 0 height issue. Any real fixes for this as it's style in the dom is set to height: 0 so no matter the CSS rule, it does not work.

[Maqsyo]

Please look here:
#4982

[gusbemacbe]

I followed the suggestions of @blaconix and @, and nothing worked.

[CodingWeb]

Fix:

.tabs-content.carousel .carousel-item {
width: 100%;
height: 280px;
}

[Jujunol]

This shouldn't be closed, this is still an Issue.
@Maqsyo The issue isn't anything to do with full width

[tomscholz]

I agree, this shouldn't be closed. Please reopen...

[silviosoto]

Facil !!!
con Jquery
$(".carousel").css({ "height": "100%"});

RESUELTO

[Jujunol]

@silviosoto I'm not sure what else you might be doing but that didn't seem to work for me

[silviosoto]

modifies the height of the property or with another height
my, I tube the problem and solve it by modifying the order in which the css files called the order is as follows:

1. materialize.css file
2. you.css

[CybMeta]

New to materializecss and this is the first big issue I'v found. I try to build swipeable views (similar to navigation in WhatsApp app) but I don't even understand the reason of having a fixed height for the carousel (or swipeable tabs as well). Can anyone explain the reason behind this behaviour? Why it is necessary at least?

[mevansLA]

Anyone stumbling across this, trying to get auto height back for the carousel item div.

this fixed it for me
.tabs-content.carousel .carousel-item { height:auto; }

[preston206]

I tried most of the ideas in this thread but none worked. The only way I could get it to work is hard coding the height. Not a great solution. Where is the support?

[treztreiz]

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.

[gillesbs]

Thank you very much for this solution, finally one that works! It is not excellent, but good enough for what I planned to do with it.

[yonardpauly]

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.

This one works perfectly :) Thank you very much.

[Enoch2k2]

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>

[TH75020]

I've just tried it. It works perfectly.
Thank you very much.

[mxdpeep]

I have found that THIS solution is better for lazy loading of images:

$(".carousel.carousel-slider").css("height", $(".carousel-item.active>img").height() + "px")

[carlostighe]

$(".carousel").css({ "height": "100%"});

I had a collapsible list in my tab that would push items off the bottom of the page.
A combination of:

$(".carousel").css({ "height": "100%"});
.tabs-content.carousel.carousel-slider .carousel-item.active{
    position: relative;
} 

seems to have fixed it for me

[idiglove]

$(".carousel").css({ "height": "100%"});

I had a collapsible list in my tab that would push items off the bottom of the page.
A combination of:

$(".carousel").css({ "height": "100%"});
.tabs-content.carousel.carousel-slider .carousel-item.active{
    position: relative;
} 

seems to have fixed it for me

Actually this is the simplest answer!

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

//and I added this
.tabs-content {
    height: auto !important;
    min-height: 100%;
}

[blackbomb404]

Just rewrote the resizeTab function in pure JS, as i'm not using JQuery:

function resizeTab(){
    let maxHeight = 0;
    const carouselItems = document.querySelectorAll('.carousel-item');

    let currentItemHeight;
    carouselItems.forEach(item => {
        currentItemHeight = getComputedStyle(item).height;
        currentItemHeight = currentItemHeight.substring(0, currentItemHeight.indexOf('px')); // just removing the 'px' at the end
        if(currentItemHeight > maxHeight)
            maxHeight = currentItemHeight; 
    });

    document.querySelector('.carousel').style.height = maxHeight +'px';
}