Adjustable height for Material UI tab components

I encountered an issue that I initially thought was related to the general configuration of my app and the height I assigned to my page wrapping classes. However, after creating a simple out-of-the-box material UI tab example, it became clear that this behavior is intrinsic to the material UI Tabs Component.

The Material UI tabs component assigns the same height to its tab container, which is determined by the largest content within. This means that if one tab has a lot of content, it will make all other tabs the same height, even if they only contain minimal content like a text field and a button.

How can I ensure that each tab container adjusts its height based on its own content?

Here is a visual representation: https://i.sstatic.net/7VYsU.png

Here is the reason why TAB ONE appears larger, as TAB TWO sets the height: https://i.sstatic.net/afUHK.png

Here is a webpackBin where you can see the code in action and experiment with it.

One workaround I have tried is setting a fixed height and overflow, but I prefer to avoid this as it leads to a double scroll bar (one in the tab container and one in the body), which looks buggy.

I would like the tab containers (those with the green border) to adjust their height dynamically based on their content, similar to TAB TWO, but independently.

Thank you in advance!

cssreactjssassmaterial-ui

Answer №1

If you adjust the height based on the visibility of the element, you can solve the problem at hand.

Illustrative Example

.react-swipeable-view-container > div[aria-hidden="false"] {
    height: 100%;
}

.react-swipeable-view-container > div[aria-hidden="true"] {
    height: 0;
}

Note: To enhance this solution, consider using a more descriptive selector such as a class name. While subjective, using an attribute selector is technically correct and more specific than just a class.

See It In Action:

Answer №2

adjustHeight will adjust the height when switching tabs. If each tab has a different height, it will accurately display the height of each tab.
For example:

<AdjustableView
  adjustHeight // ensures proper height adjustment when switching tabs
>
    <div>{'Tab 1'}</div>
    <div>{'Tab 2'}</div>
    <div>{'Tab 3'}</div>
</AdjustableView>

Enjoy your coding journey...!

Answer №3

There's a merge request that has been approved on the library containing a new method called updateHeight. You can check it out here: https://github.com/oliviertassinari/react-swipeable-views/pull/359

<SwipeableViews
  action={actions => {
    this.swipeableActions = actions;
  }}
  animateHeight
>
    <div>{'slide n°1'}</div>
    <div>{'slide n°2'}</div>
    <div>{'slide n°3'}</div>
</SwipeableViews>

Afterwards:

componentDidUpdate() {
    this.swipeableActions.updateHeight();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building upon a React component with TypeScript, we are extending its functionality using a generic type and then leveraging this same generic type

In my component, I have a setup where it takes two props - node and patchCurrentNode. import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { PropsWithChildren, useStat ...

reactjstypescriptgenerics

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

cssruby-on-railsfonts

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

I'm attempting to achieve an icon-swapping effect using jQuery+quicksand. Although it works seamlessly in Chrome, I am encountering issues with IE and Firefox. Given that the more intricate quicksand demos function flawlessly across all browsers, I su ...

jquerycssquicksand

Creating a TypeScript rule/config to trigger an error when a React Functional Component does not return JSX

I've encountered a recurring issue where I forget to include a return statement when rendering JSX in a functional component. Here's an example of the mistake: const Greetings = function Greetings({name}) { <div>Greetings {name}</div& ...

javascriptreactjstypescript

Customize Text Style in Material-UI and Next.js

Hi! I'm currently working on a new web project and looking to switch the font to Oswald (). My tech stack includes NextJS with MUI for the components. I've been struggling to find a solution on how to make this change successfully. Any guidance ...

reactjsnext.jsmaterial-uifonts

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

Vuetify's Handy Helper Classes

Hey everyone, I'm working on a vuetify project and I need to convert inline styles to utility classes (if possible) font-size: 24px; font-weight :600 I checked the documentation and noticed that it only provides options for setting size and weight wi ...

javascripthtmlcssvue.jsvuetify.js

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

htmlcss

Having trouble with media queries on my iPad

I currently have a media query set up as follows: @media only screen and (max-width: 959px) It works when I resize my browser, however, it does not seem to be functioning correctly when my iPad is in portrait mode. When I include and (max-device-width: 9 ...

htmlcssmedia-queries

Tips for maximizing image efficiency using Next.js and Amazon S3

Currently, I'm utilizing nextjs, react-hook-form, and aws to develop a form incorporating images. Here is my existing setup: form.tsx: <Controller name={'photoDump'} control={control} //{...register('photoDump')} render ...

javascriptreactjsamazon-s3next.js

Adding the type 'dark' to a MUI palette causes my website to malfunction, unless it is explicitly specified in the createMuiTheme() function

I am having trouble setting a 'dark' theme with MUI on my website when specifying type: 'dark' outside of the immediate createMuiTheme() function. Here is an example that works: const siteTheme = createMuiTheme({ palette: { prim ...

reactjsthemesmaterial-uitsx

Is it possible to customize the styling of certain fundamental MUI components using makeStyles?

:D This is my first time embarking on a project from the ground up using react and MUI. I've been curious if I have set it up correctly. My goal right now is to incorporate some styling using makeStyles for certain components provided by Material UI ...

javascriptreactjsmaterial-uistyled-components

Struggling to Align Banner in Dynamic Layout

I am currently working on centering the banner image as the resolution size decreases, rather than having it pushed to the right. The specific page I am addressing can be found here. My approach involves utilizing a width of 100%. <!-- BEGIN T ...

htmlcssresponsive-design

Having trouble resolving the dependency tree within react-navigation-stack

Trying to understand navigation in React-native and attempting to execute the following code: import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {createAppContainer} from 'react-nav ...

javascriptreactjsreact-nativenpmreact-navigation-stack

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

htmlcssreactjsbootstrap-5

determining the selected "child" checkbox in ReactJS

As a newcomer to React, I have a question that may not be the most experienced. Let me provide some context: within my ExerciseCard component, there is a checkbox (among other things). This component is rendered inside the CreateNewWorkout component where ...

reactjsevent-handlingreact-state-management

What is the best way to connect a ref to a stateless component in React?

I need help creating a stateless component with an input element that can be validated by the parent component. In my code snippet below, I'm facing an issue where the input ref is not being assigned to the parent's private _emailAddress propert ...

reactjstypescriptjsx

The rule 'react-hooks/exhaustive-deps' does not have a defined definition

I received an eslint error message after inserting // eslint-disable-next-line react-hooks/exhaustive-deps into my code. 8:14 error Rule 'react-hooks/exhaustive-deps' definition not found I tried to resolve this issue by referring to this p ...

javascriptreactjsreact-hookseslintstandardjs

How can you minimize the size of your HTML files?

My code generates an HTML file, but when there is a large amount of text, the file can exceed 50mb, sometimes reaching 70-80mb. I prefer to avoid having an HTML file of this size. Below is the source code defining an HTML template: namespace Structure { ...

htmlc++css

"Exploring the optimal form pattern in NextJS v14: Which approach reigns supreme

I've been tasked with creating a form in nextjs. In plain react, I used to handle the state of each input using useState hook. However, after reading the official nextjs documentation, it seems like the recommended practice is to validate inputs on th ...

reactjsnext.js