Tabs in React display tab content vertically below each other when switching between tabs

I am currently working on creating Tabs using react-tabs. The tab contents are being displayed one after another (on different tabs) as shown below

Here is the code snippet:

<Tabs className="tabs">
    <TabList className="tab-header-list">
        <Tab selectedClassName="tab-header-list-items"><b>A</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>B</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>C</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>D</b></Tab>
    </TabList>
    <TabPanel key="1" className="tab-panel">
        <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="3" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="2" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
</Tabs>

CSS styles applied:

.tabs {
    
}

.tab-header-list{
    color: grey;
}

.tab-header-list-items {
    display: inline-block;
    background-color: black;
    width: 25%;
    color: black;
}

.tab-panel {
    width: 900px;
    height: 300px;
}

Actual Output Expected Output

I have tried adjusting flex and display properties, but so far nothing has resolved the issue. Any suggestions would be appreciated.

cssreactjstypescript

Answer №1

Delete the height attribute from the .tab-panel class

Answer №2

This regulation is causing a disturbance

.tab-panel {
    width: 900px;
    height: 300px;
}

Setting specific dimensions like this may cause conflicts with existing libraries. It would be better to assign these styles to the elements inside the .tab-panel, rather than directly to the .tab-panel itself

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

Encountered error while attempting to compile react-native-vectoricons, resulting in a build

Encountering an error while trying to use react-native-vectorIcons despite following the guide on https://github.com/oblador/react-native-vector-icons. The project fails to build successfully. https://i.sstatic.net/mp2mR.png Below is the code snippet fro ...

androidreactjsreact-native

Tailoring Aurelia for .cshtml integration

I stumbled upon an informative article detailing the integration of Razor partials (cshtml) with aurelia. Despite my efforts, I encountered difficulty in getting the code to execute properly and was informed by Rob Eisenberg's comment that Convention ...

asp.net-mvctypescriptaureliaaurelia-templating

Experiencing Integration Challenges: Struggling with "Module Not Found" Error While Incorporating React Child Application into Next.js Parent Application

I am currently in the process of implementing a microfrontend architecture where a parent app built with Next.js interacts with a child app developed in React. Here are the key details of my setup: // webpack.config.js for React Child App const HtmlWebpac ...

reactjsnext.jsmicro-frontend

Whenever I trim down the images, the captions somehow get lost in the thumbnail

My issue arises when cropping photos, as the captions end up being hidden within the thumbnail images. How can I ensure that the captions are visible and also make all images the same height? I am striving to achieve a layout similar to this: ![][2] ...

javascriptjqueryhtmltwitter-bootstrapcss

Bootstrap4 navigation bar featuring a collapsible centered logo and two rows for enhanced functionality

Can you help me customize my Navbar for a 2-row layout? CompanyLogo link link link ----------------------------------------------------------------------- link(dropdown) link link link lin ...

htmlcssbootstrap-4

exclude the outer border from the last row of the table

Is it possible to create a table with only an outer border and exclude the bottom row, so that the bottom border of the second last row gives the appearance of being the final row? I am limited to using CSS as this is on Wordpress and I cannot make changes ...

csswordpress

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Align the button at the center of the carousel

While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am stru ...

htmlcssresponsive-designresponsive

Guide on transferring a removed list from an array to an empty array using ReactJS

I am working on a page with two sections displayed side by side. The left section contains an array list, and my goal is to delete an item from the left section when it is clicked and display it in the right section. However, I am currently struggling wi ...

reactjs

When using string as a primitive type in Vue 3, what distinguishes the usage of PropType in props from not using it?

The documentation explains how Vue does runtime validation on props with defined types. To enable TypeScript to recognize these types, constructors are cast with PropType. The code example in the documentation uses success: { type: String }, whereas it c ...

typescriptvue.jsvuejs3

Error encountered while redirecting in Next.js due to premature sending of HTTP headers

I'm currently working on developing a private page using Next.js. I have created the file pages/private.tsx. import React from 'react'; import { Label } from '@components/atoms'; import { Layout } from '@components/Layout&apo ...

reactjshttp-redirectnext.js

Accessing the variable's value within a separate if statement within the function

I have a function that retrieves data from JSON and passes it to render, but I had to include two different conditions to process the data. Below is the function: filterItems = () => { let result = []; const { searchInput } = this.state; c ...

javascriptarraysjsonreactjsecmascript-6

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Why does the page close on the second tap instead of the first tap when using an iPhone? The image changes on tap but doesn't close as expected. $("#privacy-close-btn").mouseenter(function() { $("#privacy-close-btn").css("display", "none"); $(" ...

jqueryhtmlcssiphone

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap

Update the progressBar state by leveraging React Context

I've been working on integrating React Context in a small example project. In one component, I have a Progress bar, and in another one, I have a Toggle context. Although I've successfully implemented the context without any errors, it seems that ...

javascriptreactjsfrontendweb-frontend

What is the process of transforming a jQuery element into a TypeScript instance?

In TypeScript, I am working with an object called DataTable that contains multiple methods, one of which is 'refresh' To display this DataTable on the page, it is structured as follows <table class='DataTable'>...</table> ...

jquerytypescriptinstance

Custom React Hooks Eliciting Actions in All Corners

I developed a custom React hook that takes an image file from a file input, converts it into Base64 format, and returns it as a callback. I used this hook in two components (Avatar and Cover) on the same page. However, when I select an image, both componen ...

reactjsnext.jsreact-hooks

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

javascripthtmlcssreactjsnext.js

Encountering an error in Next.js with the message 'NextRouter was not mounted'

When attempting to retrieve the input value and redirect to '/search/${searchvalue}', where 'searchvalue' represents the input value, I encountered an error stating 'Error: NextRouter was not mounted'. More information can be ...

javascriptreactjsnext.js