Ways to manage the size of Material-UI vertical tabs?

After receiving assistance from others on the thread about Creating a Material-UI tab with image tabs instead of text labels, I was able to successfully implement images for my Material-UI tabs. However, I am facing an issue where I am unable to control the width of the tabs regardless of the size of the images. The tabs expand in width if the images are larger.

To demonstrate the problem, I have created a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js.

While I tried to set the tab width using inline styles, it only resulted in clipping the content to the right rather than centering the image in the narrower tab.

Without the inline style, there is a responsive breakpoint at around 600 pixels. Below the breakpoint, the tab width is approximately 72 pixels, while above the breakpoint, it increases to about 160 pixels. Even if I manually set the width with inline styles, the image seems to shift at the breakpoint as if the underlying width for image centering remains the original tab width.

I chose these specific width values because they aligned closely with the min-width values in the Material-UI tab.js source code. Despite my attempts to modify these values in the source code, they had no impact on the breakpoint behavior, so I reverted the file to its original state.

If feasible, I would like to have the flexibility to set the tab width, margins, and padding according to my requirements while ensuring that the images remain centered in the result.

cssreactjsmaterial-ui

Answer №1

Hello there, in order to align the image in the center of the Tab, you need to add a style to the flexContainerVertical class within the Tabs component like this:

<Tabs
   orientation="vertical"
   value={value}
   onChange={handleChange}
   aria-label="Vertical tabs example"
   className={classes.tabs}
   classes={{
      flexContainerVertical: classes.flexContainerVertical   // include the flexContainerVertical class
   }}
>

Next, in your makeStyles function:

const useStyles = makeStyles((theme) => ({
  ...
  flexContainerVertical: {
    display: "flex",
    alignItems: "center", 
  }
}));

This will ensure that the images in the Tab are centered.

Check out the modified codesandbox here.

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

Design the spans to have equal heights that adjust dynamically based on the content entered

I'm facing a challenge that I've been trying to resolve using just CSS, but I've hit a roadblock. The issue at hand involves aligning multiple spans next to each other and making them equal in height. The height is not fixed and depends on ...

htmlcss

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

Tips for avoiding multiple function calls in React JS when a value changes

How can I avoid multiple function calls on user actions in my demo application? I have tabs and an input field, and I want a function to be called when the user changes tabs or types something in the input field. Additionally, I need the input field value ...

javascriptreactjsreact-hooksmaterial-ui

How can you limit the height of an image to match the height of an AppBar in Material-UI?

Looking for advice on how to properly place an image in an AppBar within the standard material height restrictions, like 64px for desktop? Currently utilizing material-ui@next (1.0.0-beta.2). This code snippet seems to work well: <AppBar> <To ...

reactjsmaterial-designmaterial-ui

Text transitions in a gentle fade effect, appearing and disappearing with each change

I want to create a smooth fade in and out effect for the text within a div when it changes or hides. After researching on Google and Stack Overflow, I found that most solutions involve adding a 'hide' CSS class and toggling it with a custom func ...

javascriptcss

Can you provide guidance on integrating Bootstrap grid with components in a React application?

I'm struggling to display at least 2 cards side by side in a row while mapping through data with my custom 'Content' component. Any tips on how to achieve this? Here is the code I am working with: https://i.stack.imgur.com/O8yx3.jpg import ...

reactjstwitter-bootstrapreact-bootstrap

Guide to resizing images with next.js

I have an issue with resizing an image within a Bootstrap card using next/image. I am trying to decrease the size of the image to about 60% of its original size and prevent it from filling the entire top portion of the card. I attempted wrapping the imag ...

cssreactjsbootstrap-4next.jsbootstrap-cards

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

htmlcssangulartwitter-bootstrapbootstrap-4

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

Tips for linking attributes to a function using ES6

I'm currently working on a stateless React.js component called myView. I want to keep the syntax as concise as possible, but I'm having trouble understanding how to export a default function with an attached object. Here's an example in myVi ...

javascriptreactjsecmascript-6

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement

What could be the reason why this LESS CSS is not taking effect?

Why won't this stylesheet load properly? The desired background color is supposed to be similar to cadetblue. You can view my page with the linked home.less.css at: ...

javascripthtmlcssless

Difficulty arises when trying to add various text fields to a collection

Lately, I've been making modifications to the Meteor1.3+React Todos app to familiarize myself with the basics, and I must say, it's been a smooth ride so far. However, I have encountered a roadblock. I want to incorporate an additional text field ...

javascriptmongodbmeteorreactjs

Personalize the month titles in MUI DatePicker

Is there a method to modify the month name format from 3 words to full names? this is my current setup for instance, mui responsive datepicker displays: Jan - Feb - Mar - Apr - May I wish for it to show January - February - March and so forth. I have ...

reactjsmaterial-uidatepicker

Enhanced functionality for managing Material UI elements with Rspec-Watir, providing a streamlined and sophisticated approach

Currently, I am in the process of writing automation code to manipulate toggles within a Material UI component. However, I have encountered some difficulties when attempting to interact with elements beyond just opening the initial dialog. Please refer to ...

rspecwatir-webdrivermaterial-ui

``The component in React crashes due to a disabled water filter

My react component crashes after adding an SWR data fetch. Interestingly, if I comment it out the component works fine. Upon uncommenting line const { data } = useSWR(`/api/views/${slug}`, fetcher), I encounter the following error: Error: Element type is i ...

reactjsnext.jsswr

Tips for optimizing component rendering in React-Redux and preventing unnecessary re-renders

Currently, I am using react-router-redux and have nested connect()ed components. While this setup works fine, the issue arises when my nested components re-render whenever there is a change in state. The problem lies in the fact that the root has 5 childr ...

reactjsredux

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this: <p>This is a component :<component></component></p> & ...

htmlcssvue.jsvuejs2vue-component

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page. <div id="outer"> <div ...

htmlcssscroll

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss