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

Attempting to insert a line break tag within the text using React

Having trouble inserting line breaks in text using React. Can anyone guide me on how to achieve this? I've attempted adding the br tag, but it is displaying as in the browser. Here's a snippet of my code. Appreciate any help or advice. let sp ...

javascriptjqueryhtmlreactjsredux

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm encountering some difficulties with the Autocomplete component in @react-google-maps/api. While Autocomplete is working and displaying options, clicking on an option fills the input box but I'm only getting 'undefined' from the Plac ...

javascriptreactjsgoogle-maps

The vanishing act of custom fonts in Internet Explorer

This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...

cssinternet-explorercachingfont-face

Can I exclusively utilize named exports in a NextJS project?

Heads up: This is not a repeat of the issue raised on The default export is not a React Component in page: "/" NextJS I'm specifically seeking help with named exports! I am aware that I could switch to using default exports. In my NextJS ap ...

javascriptnode.jsreactjstypescriptnext.js

Accessing a Child Component Function in Material UI

Utilizing the Material UI framework, I am constructing an application with React. Included in this application is a Dialog feature that permits users to modify various information about an object (referencing the code below). The dialog consists of two but ...

javascriptreactjsmaterial-ui

Tips on adjusting the pixel dimensions of an image using a file object

Within a form on our website, users have the ability to upload an image file. To ensure quality control, I've set up validation to confirm that the uploaded file is either an image or gif format. In addition to this, I'm looking for a solution th ...

javascriptreactjsfileupload

The Importance of Apostrophes when Working with XML and Data-Bound Controls

Within my XML content, there may be instances where an apostrophe appears in a node's value: <Root> <Sections> <SectionA> <Heading>Title</Heading> <Description>This is section &a ...

asp.nethtmlxmldata-binding

"Utilize Ajax to load PHP content and dynamically refresh a specific div

I have implemented an image uploading system, but now I want to incorporate a feature that allows users to rotate the uploaded images using Ajax. The challenge I'm facing is that if the session variable is lost during a full page update, I need to ens ...

javascriptphpjqueryhtmlajax

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

"Addressing the issue of white space between the status bar and header in Cordova

I have tried numerous solutions but I am still unable to remove the white space between the header and status bar, as shown in the attached image. https://i.sstatic.net/a9xTG.jpg My current setup involves using Intel XDK version 3987 with Cordova plugin ...

androidcsscordovaintel-xdk

Utilizing divisions for specifying CSS attributes

I'm attempting to distinguish the CSS properties of two tables based on which DIV they are contained within. If you take a look at http://jsfiddle.net/jdb1991/tpXKT/, you will notice that the table in "resultA" is utilizing the TD property designated ...

css

Loop through object in React

I have what seems to be a beginner question with potentially many answers available. The object named Country.js is defined as follows: const Country = { albania: { 'countryNo': 70, 'name': { ...

javascriptreactjs

RequestDispatcher.forward() does not work when servlet is invoked through an Ajax POST request

My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...

javascriptjavahtmlajaxservlets

Uploading files using Remix.run: Transforming a File object into a string during the action

I'm currently developing a Remix application that allows users to upload files through a form. I have a handler function for handling the form submission, which takes all the form data, including file attachments, and sends it to my action. The probl ...

javascriptreactjstypescriptformsform-data

Encountering no automatic refresh feature in Next.js

Encountering an issue with Next.js where the local host index page doesn't automatically refresh whenever a change is made. To provide some context, I initiated a Next.js application using npx create-next-app --use-npm. After starting the local serve ...

javascriptreactjsnext.js

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

What is the best way to organize the data retrieved from the api into a map?

In my search page component, I display the search results based on the user's query input. Here is the code snippet: "use client"; import { useSearchParams } from "next/navigation"; import useFetch from "../hooks/useFetch&qu ...

reactjstypescriptnext.js

Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows? In my table, each column has a border around it: <table> <tr> <td style="padding:0 15px 0 15px;">hello</td> <td style=" ...

htmlcsshtml-table

A convenient Delete Modal Component in React utilizing Reactstrap

I am currently working on implementing a reusable Delete Component using reactstrap, which can be called from other components. Below is the code for my DeleteModal: class DeleteModal extends Component { constructor(props) { super(props); this. ...

javascriptreactjstwitter-bootstrapreactstrap