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.

36 Answers

✔️Accepted Answer

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%; }

Other Answers:

@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)

$( window ).resize(function() { resizeTab(); });
function resizeTab(){
var maxHeight = 0;
if($(this).height() > maxHeight) maxHeight = $(this).height();
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


    $('.tabs').tabs({swipeable: true, onShow: resizeTab});
    $( window ).resize(function() { resizeTab(); });

  function resizeTab(){

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)

    $( window ).resize(function() { resizeTab(); });
function resizeTab(){
    var maxHeight = 0;
         if($(this).height() > maxHeight) maxHeight = $(this).height(); 

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

Related Issues:

materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor and meteor add materialize:material...
materialize Swipeable tabs carousel height limited to 400px
The problem is that the swipeable tabs are styled by the carousel css Reference #4148 ...
materialize Cannot update to 0.100.1
It makes no sense if everyone writes: I have the same problem Just upvote the actual issue :) We are...
css loader Can't resolve 'fs' when bundle with webpack
Adding to webpack config file and the error is gone Not sure how it works It seems like webpack did ...
styled components [v4.0.0] Types: Could not find a declaration file for module 'styled-components/native'.
styled-components/native types moved to @types/styled-components-react-native. there are no types fo...
electron Requiring electron outside of main.js causes a TypeError
For anyone encountering this problem in the future and reading this thread Electron version: 1.3.5 O...
tailwindcss npx tailwindcss init not working
I had trouble generating the configuration file while using the compatibility package I updated my t...
electron Error while importing electron in react | import { ipcRenderer } from 'electron'
@MarshallOfSound my mistake I found the solution in issue #7300 if it can help anyone Please note th...
electron Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
If this occur when having <base href=/> in the index.html just replace it by <base href=./>. ...
emotion TS2322: Property 'css' does not exist...
For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:...
electron Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
Try It should output a progress bar for the download 👍 Electron version: latest (That Try) Operatin...
autoprefixer Regression: -webkit-box-orient rules removed
Possibly helpful for anyone reading up on this thread and problem While upgrading my dependencies on...
styled components How do I provide props to styled elements in Typescript?
This is what I use at the moment: I looked at the docs and other than creating a whole empty compone...
css loader Cannot find module "!!./../node_modules/css-loader/ ...
I faced this problem also but this was because of the node-sass package I previously used Node V4.5....
styled components How do you use attrs with TypeScript?
If you need props inside your component and need to type those with a generic you can use this patte...
electron How do I open a url from <a> on default OS browser?
I found this code snippet on S.O.: Dropped it in my main index file it seems to be working as far as...
css loader Module build failed: Unknown word (5:1)
In my case the problem was the order of the loaders I changed this: to this: and it worked. ...
prettier Change HTML/JSX formatting to have one attribute/prop per line
The point I am trying to make is that the vertical space matters Wasting it (too much) has negative ...
esbuild Vue.js support
@yyx990803 I just added an API similar to what you proposed: It should now be possible to make use o...
electron 9.0.0 does not display local images
A recap for anyone else who's having this issue: Make sure you've enabled webSecurity from your Brow...
capacitor FileReader API not firing
You can try this. Description of the problem: In my project I'm trying to read and convert a Blob do...
ng packagr feat: peerDependencies and devDependencies auto whitelist.
@codegagan you can remove the warnings by adding the below to ng-packagr.json right next to lib prop...
css loader Unknown word error when loading plain CSS (not Sass or Less)
I seem to figure this out According to webpack docs there are multiple ways to use loaders If use re...
prettier [resolved] [HTML] allow corresponding option to jsxBracketSameLine
I don't think I've ever seen any markup language with the closing brackets on a separate line I'd li...
styled components Integrate with Animated
I know this is an old issue but to share a solution I've been using with latest version of styled-co...
electron The SUID sandbox helper binary was found, but is not configured correctly
CONFIG_USER_NS=y enables the user namespaces feature but they're still restricted to privileged user...
jupyter themes No module named 'jupyter_core'
+1 Edit: @OldBoots4 I did this: pip3 install --upgrade notebook and this: pip3 install lesscpy and i...
bootstrap Navbar .sticky-top doesn't work
My setup: Bootstrap@4.0.0-beta.2 macOS Sierra - Version 10.12.6 Google Chrome - Version 62.0.3202.62...
styled components Separate HTML attributes from styling props
Here’s my proposal It doesn’t seem to match where the library wants to go Background I am trying to ...
parcel "Name already registered with serializer" with parcel@next
I was getting this issue after trying to switch from parcel-v1 to parcel-v2 Deleting node_modules an...
ng packagr Please add a @NgModule annotation in AOT Compilation
Don't know if it helps but i had the same issue : Turns out my generated metadata [library].metadata...
styled jsx Typescript typings
I was able to fix it with: First of all awesome tool! We're using it together with TypeScript and it...
postcss import Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed
We ended up pinning postcss-import at 12.x while keeping up-to-date with postcss on the latest branc...
prettier Feature Request: breakBeforeElse
This feels like one of those I can't adopt prettier unless options that was mentioned in the 1.0 rel...
autoprefixer Browserslist: caniuse-lite is outdated
If you have a multitude of out of date packages the fastest way to update them is with npm-update-al...
prettier Add option to omit semicolons in output
I use standard.js which is a popular no-configuration style guide & linter They insist on a semicolo...
emotion Emotion v10 unusable with pure TypeScript
FYI having jsxFactory: jsx means that you would have to add import { jsx } from '@emotion/core'; to ...
parcel Cannot find module error when importing an static file using typescript
Create a .d.ts file in your project and put : It will instruct TypeScript to use any for all imports...
styled components Uncaught Error: Cannot create styled-component for component: undefined
I had the exact same issue and was able to get around it after I saw this comment on another repo Ba...
parcel Bug: React not defined (with TypeScript)
I encountered this as well recently Using import * as React from 'react' worked for me Maybe you can...
parcel 🐛dist/ directory isn't cleaned on repeated builds
In package.json add another script named prebuild: prebuild will run automatically before the build ...
css loader [2.0.0] ValidationError: CSS Loader Invalid Options - options should NOT have additional properties
Same issue here And works fine if remove minimize: true. Operating System: Linux workstation 4.15.0-...
js beautify Option to preserve or inline "short objects" on a single line
For people like me coming here looking for a way to make it work: it works and can be enabled with t...
prettier Space after function name in declarations
This is one of the reasons I've had to step away from adopting Prettier I would be quite happy with ...
parcel Uncaught ReferenceError: regeneratorRuntime is not defined
how to solve ? If you are targeting modern browsers 🐛 bug report When I started using generators in...