Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Question

Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Struggling with incorporating the Collapse + TransitionGroup Component in MUI while trying to make the containers expand using flexbox.

<Box sx={{display: 'flex', height: '100vh', width: '100vw'}}>
  <Box sx={{flex: 1}}>Content-A</Box>
  <Box sx={{flex: 1}}>Content-B</Box>
</Box>

Here is a basic setup I'm aiming for. Both Boxes side by side, dividing the entire page into left and right sections. However, integrating the Collapse Component causes issues:

<TransitionGroup sx={{display: 'flex', height: '100vh', width: '100vw}}>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-A</Box>
  </Collapse>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-B</Box>
  </Collapse>
</TransitionGroup>

The Collapse component seems to disrupt the Flexbox parent-child connection. Upon inspecting the DOM, I see that the Collapse Component adds 3 wrappers around the child component (root, outer, inner wrap). How can I pass down the flexbox properties to the original child?
I attempted to override the styles of these wrapping components in the theme and assign them display: flex, flex: 1 to propagate it all the way down to the child, but this results in choppy transitions.

EDIT: To clarify, the reason for needing the transition group is because I want a specific transition effect. Essentially, I have the page split into left (A) and right (B). When triggered, (A) should transition off the screen to the left (horizontally), (B) moves to where (A) was, and a new element (C) slides in from the right to take B's place. Think of it as a Sliding Queue. This process repeats (B exits -> C moves to B's position -> D transitions in). The problem arises when using Collapse horizontally as it doesn't adjust to fill the remaining space.

css reactjs flexbox material-ui css-transitions

Answer 1

Answer №1

In my opinion, using css properties like flex and the Collapse component in this particular way may not yield the desired result. The Collapse component inherently applies css properties such as width: 0px, which might be overridden by your display:flex declaration.

Consider Using CSSTransition Instead

As an alternative approach, you can manually define and apply transition rules by utilizing the CSSTransition component, which is internally used by Collapse as well.

For more information, refer to the official documentation.

Here's an Example

You can find a sample scenario in this sandbox example

const useStyles = makeStyles({
  "slide-enter": {
    flexGrow: 0,
    width: 0,
    overflow: "hidden",
    whiteSpace: "nowrap",
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  // Add more style definitions here
});

.......
     <TransitionGroup style={{ display: "flex" }}>
        {columns.map((_, i) =>
          i >= columns.length - 2 ? (
            <CSSTransition
              key={i}
              timeout={300}
              classNames={{
                appear: classes["slide-enter"],
                // Include other classnames
              }}
            >
              <ColoredBox>Content-{i}</ColoredBox>
            </CSSTransition>
          ) : null
        )}
      </TransitionGroup>

Past Answer for Reference

Previously suggested solution before receiving clarification from OP:
~~It seems a bit unclear what specific outcome you are aiming for.~~

Reason Behind Using Transition Group?

The purpose of including a TransistionGroup component is typically to automatically manage the 'in' property of a Collapse component when dealing with multiple items like adding them to a list.

If your intention is simply to render two columns without complex animations, you may omit the TransitionGroup and control the 'in' boolean manually.

Customizing Collapse Styling

To customize the styling of the collapse element, you can pass inline styles with required CSS properties. Example:

<Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} >

A Demonstrative Example

Check out this detailed CodeSandbox demo

The demo showcases two versions:

Version 1 focuses on toggling between opening and closing columns

Version 2 involves dynamically adding columns and expanding them using TransitionGroup

Based on your query, it appears that Version 1 aligns better with your requirements:

const Example1 = () => { const [isOn, setIsOn] = React.useState(false); const toggle = () => { setIsOn((prev) => !prev); }; return ( <> <Button variant="contained" onClick={toggle}> {isOn ? "collapse" : "expand"} </Button> <Box display="flex"> <Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} > <Box>Content-A</Box> </Collapse> <Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} > <Box>Content-B</Box> </Collapse> </Box> </> ); };

Answer 2

In my opinion, using css properties like flex and the Collapse component in this particular way may not yield the desired result. The Collapse component inherently applies css properties such as width: 0px, which might be overridden by your display:flex declaration.

Consider Using CSSTransition Instead

As an alternative approach, you can manually define and apply transition rules by utilizing the CSSTransition component, which is internally used by Collapse as well.

For more information, refer to the official documentation.

Here's an Example

You can find a sample scenario in this sandbox example

const useStyles = makeStyles({
  "slide-enter": {
    flexGrow: 0,
    width: 0,
    overflow: "hidden",
    whiteSpace: "nowrap",
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  // Add more style definitions here
});

.......
     <TransitionGroup style={{ display: "flex" }}>
        {columns.map((_, i) =>
          i >= columns.length - 2 ? (
            <CSSTransition
              key={i}
              timeout={300}
              classNames={{
                appear: classes["slide-enter"],
                // Include other classnames
              }}
            >
              <ColoredBox>Content-{i}</ColoredBox>
            </CSSTransition>
          ) : null
        )}
      </TransitionGroup>

Past Answer for Reference

Previously suggested solution before receiving clarification from OP:
~~It seems a bit unclear what specific outcome you are aiming for.~~

Reason Behind Using Transition Group?

The purpose of including a TransistionGroup component is typically to automatically manage the 'in' property of a Collapse component when dealing with multiple items like adding them to a list.

If your intention is simply to render two columns without complex animations, you may omit the TransitionGroup and control the 'in' boolean manually.

Customizing Collapse Styling

To customize the styling of the collapse element, you can pass inline styles with required CSS properties. Example:

<Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} >

A Demonstrative Example

Check out this detailed CodeSandbox demo

The demo showcases two versions:

Version 1 focuses on toggling between opening and closing columns

Version 2 involves dynamically adding columns and expanding them using TransitionGroup

Based on your query, it appears that Version 1 aligns better with your requirements:

const Example1 = () => { const [isOn, setIsOn] = React.useState(false); const toggle = () => { setIsOn((prev) => !prev); }; return ( <> <Button variant="contained" onClick={toggle}> {isOn ? "collapse" : "expand"} </Button> <Box display="flex"> <Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} > <Box>Content-A</Box> </Collapse> <Collapse in={isOn} orientation="horizontal" style={{ flex: "1", display: "inline-block" }} > <Box>Content-B</Box> </Collapse> </Box> </> ); };

Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Answer №1

Consider Using CSSTransition Instead

Here's an Example

Past Answer for Reference

Reason Behind Using Transition Group?

Customizing Collapse Styling

A Demonstrative Example

Similar questions

Is it acceptable to generate a standard redux update action?

Can you tell me the standard font size in Internet Explorer 9?

I am experiencing issues with the Bootstrap responsive menu not functioning correctly on my template

Manual mocking in Jest is only effective for the initial function call

Engaging with the CSS content attribute

Tips on stopping slideToggle from opening and closing when clicked for the first time

Encountered 'DatePickerProps<unknown>' error while attempting to develop a custom component using Material-UI and react-hook-form

Image element for Material UI CardMedia

Centering a button within a table-cell through movement

Displaying the product price in a component header in Next.js when clicking on the product

Updating variable storage in React components

Utilizing ReactJS material-UI to extract information from nested JSON in a table format

What is the process for assigning a custom React component as the Type for a prop in another component?

Clicking will cause my background content to blur

Tips for swapping out text with a hyperlink using JavaScript

What is preventing my video from filling the entire screen?

Jquery bypasses original stylesheet settings when inline styles are removed

Injecting CSS styles into dynamically inserted DOM elements

CSS - borders are overlapping with one another

Delete chosen border from photo in html