Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am having difficulty finding an elegant solution for this.

https://i.stack.imgur.com/S26oc.png

Currently, my approach involves setting margin-top on the Collapse component only when it is in its expanded state and applying a transition to that property. However, the transition appears delayed and does not create a smooth animation. Is there a way to include the spacing/margin in the transition animation to achieve a polished effect?

You can view my code sandbox here: https://codesandbox.io/s/stoic-mclaren-csg2wg?file=/src/App.tsx

I would appreciate any suggestions or feedback!

htmlcssreactjsmaterial-ui

Answer №1

After some further investigation, I was able to find a solution - by adding the margin-top directly to the inner wrapper element itself, the issue was resolved.

For example:

"& .MuiCollapse-wrapperInner": {
    marginTop: "20px"
  }

I believe this action forces the collapsing component to incorporate the specified margins in the transition, resulting in a smooth and polished animation effect.

https://i.stack.imgur.com/RmeRA.gif

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

Spaces ahead and beneath the text

I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but ...

htmlcss

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...

javascriptjsonhtml

Can you explain the inner workings of the recursive rendering in Material UI's TreeView?

I'm currently working on dynamically rendering the Material UI TreeView. My goal is to add new nodes when a node is expanded. I've encountered some issues while attempting to achieve this. I have a JSON data variable containing nodes, and I am ad ...

reactjsmaterial-uitreeview

Create a notification menu in Bootstrap using Bootply, which conveniently displays a numerical badge at the top

I am interested in implementing a bootstrap notification menu similar to the one found at this link: http://www.bootply.com/oasBuRC8Kz# However, I would like to add the number of notifications to the upper right corner of the glyphicon. I have gone throug ...

csstwitter-bootstrapglyphicons

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

How to add suspense and implement lazy loading for a modal using Material-UI

Currently, I am implementing <Suspense /> and lazy() to enhance the performance of my project. While everything seems to be working smoothly, I have observed some minor changes in DOM handling that are causing me slight confusion. Consider this scen ...

javascriptreactjsmodal-dialogmaterial-uilazy-loading

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

phphtmlvariablespostget

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

Issue with Webpack - npm run start and build operation not functioning?

Although I typically use create-react-app for my React projects, I decided to create one without it. However, I am encountering issues with the webpack configuration as I am not very familiar with it: This is how my package.json file looks like: { " ...

javascriptreactjsnpmwebpack

Working with React, with the choice of incorporating jsx or not

I am currently delving into the world of React and found myself able to run a simple app without using JSX. In my JavaScript file, I started with: class TestClass extends React.Component Do I really need to utilize JSX or can I just stick with JavaScript ...

javascriptreactjs

Difficulty with JQuery Show and Hide Functionality

I've implemented a jQuery menu, but encountering the issue where clicking on any menu link opens all menus instead of just the one clicked. I've attempted to resolve this by using show and hide classes, however, it seems that nothing is working n ...

jqueryhtmlcss

React.js Material UI Autocomplete Input not functioning as expected

Trying to import Autocomplete exactly from the documentation at https://material-ui.com/components/autocomplete/ results in the following error message being displayed: Failed to compile. ./node_modules/@material-ui/lab/esm/useAutocomplete/useAutocompl ...

reactjsinputmaterial-ui

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

javascriptcss

immediate removal upon pressing the button

Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...

phphtml

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

I'm a beginner in JavaScript and I recently created a React project. Everything was working smoothly in local development until I deployed the project on Vercel. The issue is when a user clicks on the "about button," instead of showing 'about.htm ...

javascriptreactjs

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml

Leveraging class names to dynamically apply CSS styles to components based on their props value

In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...

javascriptcssreactjsmaterial-uiclass-names

Error encountered: Unrecognized Runtime SyntaxError: Unexpected character encountered at line 1, starting from column 1 within the JSON content in Next.js

I'm encountering a problem with the js-cookie package in Next.js. I set up a store using the context API, and my initial state looks like this: const initialState = { darkMode: Cookies.get('darkMode') === 'ON' ? true : false, c ...

reactjsnext.js

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

javascripthtmlreactjs