React: Issue with CSS heights in grid-container not updating when state changes

In a container div, I have three elements: headerContainer, diagramContainer, labelContainer. The container has a fixed height and I want all elements to fill it. The diagramContainer should adjust its height dynamically based on the labelContainer's height when the state changes (refer to images). Upon page reload, everything displays correctly (image 1). However, after changing the state causing the heights of the containers to change, the grid does not recalculate the heights resulting in overflow from the labelContainer (image 2).

  1. State on reload (working fine): https://i.sstatic.net/mNqAb.png

  2. Changed state without reload (labelContainer overflows/diagramContainer does not resize): https://i.sstatic.net/LlmJg.png

  3. Expected outcome (containers' heights adapt on state change): https://i.sstatic.net/kVn5U.png

JSX:

<div className={styles.wrapper}> // Grid Container (fixed height)
    <div className={styles.headerContainer}>
        <h3>Diagram</h3>
        // Header (auto height)
    </div>
    <div className={styles.diagramContainer}>
        // diagramContainer (height required for display)
        // ...Diagram code...
    </div>
    <div className={styles.labelContainer}>
        // LabelContainer (height can change on state change)
        // ...LabelContainer code...
    </div>
</div>

CSS:

.wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

.labelContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

How can I achieve this? Any assistance would be greatly welcomed!

Answer №1

After much exploration, I stumbled upon a fix inspired by this helpful post. By adjusting the grid-template-columns to "auto minmax(0,1fr) auto" instead of "auto 1fr auto", I was able to achieve the desired outcome. The labelContainer now resizes appropriately depending on its content, while the diagramContainer gracefully fills up the remaining space.

Check out the revised solution:

.wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto; /* update to this */
    grid-template-columns: 100%;
}

.labelContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

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

The onClose function of the Material-UI drawer is being triggered repeatedly with each successive click

I'm working with mui Drawer, Formik, and React <Drawer anchor="right" open={isOpen} onClose={onClose}> When the drawer is closed, the onClose function is called. There are also props for onBackdropClick and hideBackdrop After closing ...

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

Troublesome button appearance

I set up two sections to gather user information using buttons. My goal is for the button styles to change when clicked, making it clear to users which option they have selected, even if they switch between sections. However, I encountered an issue where ...

Successfully transferring data from a functional-based child component to a class-based parent component

Is there a way to transfer various types of data, such as arrays, strings, and numbers, from Child1 (a functional-based component) to the Parent component in the App? The Parent component is class-based, while the Child component is functional-based. Par ...

Ensure that site content remains visible above the table when refreshing the Ajax Table

Whenever I update the table, the content above it ends up below the table. This is frustrating because the content should not be affected by the refresh. How can I resolve this issue? <!DOCTYPE html> <html> <head> <titl ...

Foundation and equalizer do not provide an optimal user experience

I am new to using Foundation. Currently, I am utilizing Foundation 5 along with equalizer. I have a row with 2 columns - one containing text and the other containing an image. I want both columns to have the same height, so I am using data-equalizer. ...

Need assistance with a coin flip using HTML and Javascript?

After spending hours trying to make the code work with the example provided, I find myself unable to get it functioning correctly. Is there anyone who can assist me in putting all of this together so that it runs smoothly? var result,userchoice; functio ...

I am facing an issue with effectively passing properties from a parent state to its child component

In the Login component, I set the authentication state using the token as false initially. After a successful login, the token is changed to true. function Login() { const [user, setUser] = useState({ name: '', email: '' }); const [ ...

SVG files do not fetch external CSS stylesheets when embedded in the DOM

Take a look at this example on jsFiddle. When using IE, the external CSS is loaded and the rectangle is red, but in Chrome and FF the rectangle stays black. What causes this difference? <!-- Used for referencing the external css --> <?xml-styl ...

Wordpress theme's Bootstrap failing to display correctly on browser

I've been working on a WordPress theme with the bootstrap framework to style my page. First, I created a mock-up using standard HTML to ensure everything looked as desired: Prototype Code: <!DOCTYPE html> <html> <head> <meta c ...

What specific CSS property creates the distinction in text vertical alignment between a <button> and a <div>?

I recently discovered that the text inside a <button> is automatically vertically centered, whereas the text inside a <div> is aligned to the top. Despite my best efforts, I couldn't determine which CSS rule was responsible for this disti ...

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

User Interface Image I am looking to implement a filter functionality in the FlatList data based on top categories, where the filter button allows for multiple selections. The FlatList data is stored in the HotelData array, and the categories are also re ...

A guide to displaying a single field from a Firestore document using React

For our fourth-semester university project, we are creating a quiz application using React with MaterialUI for styling and Firestore as the database. I am currently facing challenges in displaying/rendering data from a document in Firestore. The Firestor ...

What's causing the `sx` prop to lag behind in performance?

According to MUI's own documentation, and this answer, components utilizing the sx feature exhibit noticeably slower rendering speeds compared to components using alternative styling methods. At first glance, it may seem that sx is simply a more conv ...

Tips for customizing the `src/app/layout.tsx` file in Next.js 13

I am looking to customize the layout for my /admin route and its child routes (including /admin/*). How can I modify the main layout only for the /admin/* routes? For example, I want the / and /profile routes to use the layout defined in src/app/layout.ts ...

What are the steps to fetch data from Firebase v9 and showcase it on the frontend?

Hello, I have successfully connected a contact form to Firebase and now I need help displaying the data in the browser. Despite trying multiple approaches, I have been unsuccessful so far. The collection for the data is named messages. Below is the code ...

Angular2 Components with Unique Styling

I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one. The basic st ...

What could be causing the data to not load from the database when the page is loaded?

My current setup involves a button that triggers a specific function upon loading. return ( <> <LikeButtonStyle onLoad={getUserData} onClick={addInfo}> <Image width="10px" height="auto" src="/ ...

The function Router.transitionTo is not defined in React/Redux

I need help with redirecting within the re-base post callback in my component. Visit this link for more information My setup involves using re-base to store data in Firebase and Redux for state management. I attempted to pass the router via context, but ...

What are the essential files needed in Kendo UI Core for a mobile app?

Several months ago, I created a trial Kendo mobile app but now I want to verify it using the most recent version of Kendo UI Core. In my previous project, I referenced the following files: <link href="../styles/kendo.common.min.css" rel="stylesheet" / ...