Expanding a Material UI Accordion does not cause the surrounding content to shift or move

I'm currently designing a User Interface for a web application that allows users to have multiple projects open simultaneously. To achieve this, I decided to use an accordion as the logical component in the left navigation bar. The reason behind this choice is that users may or may not want to view the list of active projects at all times.

When the accordion is collapsed, everything looks neat and organized like this:
https://i.sstatic.net/dUAZj.png

However, when it expands, the Divider does not move down or resize the containing div as expected, resulting in this mess:
https://i.sstatic.net/dZ9du.png

You can see that the contents of the Accordion are displayed below the Divider. Another issue is that the AccordionSummary repositions itself while expanding, but I can address that later on.

I've set up a codesandbox with the basic UI framework. In the ProjectsTile.js and ProjectsTile.css files, I've included code for both the Material UI Accordion and my attempt at coding a custom Accordion from scratch. Unfortunately, neither solution successfully moved the other contents within the NavDrawer.js when expanding the Accordions. How can I ensure that the content below the ProjectsTile in the NavDrawer moves down when the Accordion expands and back up when it collapses?

javascriptcssreactjsmaterial-ui

Answer №1

Be cautious when using <code>position: absolute
as it may cause the divider to not move along with the Accordion.

I have made adjustments to your ProjecTile.css

.projects-tile-accordion {
  display: block;
  width: calc(100% - 45px);
  color: white;
}

In addition, I have included some margin for your AccordionDetails in the same CSS:

.manual-accordion-expanded-details {
  margin-left: 40px;
}

Now your Accordion has been updated and looks like this:

https://i.sstatic.net/6WORH.png

https://codesandbox.io/s/adoring-elion-7m29iv?fontsize=14&hidenavigation=1&theme=dark

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

Experiencing difficulty importing Materialize CSS JS into React

Good day everyone, I've been facing challenges in implementing materialize css into my react-app, specifically with the JavaScript files. After trying various methods, I believe that I have made some progress using the following approach: In my &ap ...

javascriptnode.jsreactjsnpmmaterialize

Steps for displaying search results based on state when a button is clicked

My current challenge involves creating a component that displays a list of results upon clicking the "Find" button. However, I am encountering issues with the results state variable not resetting when I utilize setResults([]). In addition, only the most r ...

javascriptreactjsreact-hooksstatejsx

arrow function implemented in a React hook for handling onClick event

From my understanding, placing an arrow function in the JSX creates a new reference of a new function each time it is triggered. For example: <p onClick={() => handleClick() /> In older versions of React with classes, we could do this: <p onCl ...

javascriptreactjsreact-hooks

Using AJAX to save data while dealing with duplicated forms

Project Details: In the midst of developing an asp.NET web application, I am faced with a challenge. The user interface (UI) I have created allows users to generate multiple instances of an object by inputting data into forms. Consequently, numerous ident ...

javascriptajaxasp.net-coreasp.net-web-apiasp.net-ajax

visit a new page with each reload

Can I navigate to a new page without refreshing the current window.location.href? I attempted to achieve this using a jQuery event handler on the window object, however, it doesn't seem to be functioning properly. $(window).on('reload', fu ...

javascriptjquery

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

I recently wrote an HTML code snippet like this: <div id = "dialog-1" title = "Dialog Title goes here..."> <select id= "lang" name= "lang"> <option value="1"> TEXT </option> <option value="2"> HTML </op ...

javascriptjqueryangularjsjquery-uijquery-plugins

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml

The function you are trying to call is not callable. The type 'Promise<void>' does not have any call signatures. This issue is related to Mongodb and Nodejs

Currently, I am attempting to establish a connection between MongoDB and Node (ts). However, during the connection process, I encountered an error stating: "This expression is not callable. Type 'Promise<void>' has no call signatures" da ...

javascriptnode.jstypescriptmongodbnode-modules

Asynchronous data handling with React state hook is not effectively managed

I am currently facing an issue where I am attempting to update a component's state using an effect hook that interacts with the backend API. For this particular scenario, I prefer sticking to traditional React methods rather than integrating something ...

reactjsreact-hooksfetch-api

JavaScript embedded within LD-JSON format

Is it feasible to run JavaScript code within an ld+json script? Like for instance, "window.location.hostname" <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://" + window.location.ho ...

javascriptjsonjson-ld

The correct functionality of canvas coordinates may become unreliable once CSS has been implemented

After successfully setting up my drag and drop game in canvas, I decided to make my canvas responsive by adding the following code to my css file: #canvas { width:100% } However, this adjustment caused a discrepancy in my coordinates. Now, when I cli ...

csshtmlcanvasresponsive-design

Failure to retrieve fax API data using Twilio's Node.js HTTP requests

Looking to implement fax receiving using Twilio API. This is an excerpt from my index.js file: // const http = require('http'); const express = require('express'); const bodyParser = require('body-parser'); c ...

javascriptnode.jstwilio

Tips for adjusting the width of the box-shadow in CSS

I am facing a challenge with my button that has a box-shadow effect on hover. Currently, I am unsure how to adjust the width of the box-shadow effect. Here is a snapshot of my button's current appearance: https://i.stack.imgur.com/Mg0df.png</p&g ...

cssbox-shadow

Users are reporting that verification emails are not being sent when the Accounts.createUser function is used within

I have a simple meteor method set up to create user accounts. In my server/methods.js file: Meteor.methods({ createUserAccount: function(user) { return Accounts.createUser(user); } }); Then in my server/init.js file: Meteor.startup(function() ...

javascriptmeteormeteor-accountsmeteor-helper

Handler for stack trace errors and error handling for promises

Introducing my customized error handling function: function onError(message, source, lineno, colno, error) { sendRequestToSendMail(arguments) } window.onerror = onError In addition to that, I have asynchronous tasks utilizing promises and I aim to captur ...

javascripterror-handlingpromise

The value from select2 dropdown does not get populated in my article in Angular

I am attempting to link the selected value in a dropdown menu to an article, with a property that matches the type of the dropdown's data source. However, despite logging my article object, the property intended to hold the selected dropdown value app ...

javascriptangulartypescript

"Adjusting the position of the Icon in the Material UI ItemList to make it closer

How can I bring this icon closer to the text? I'm not sure how to do it. When I enter developer mode, it shows me this. https://i.stack.imgur.com/WzhB1.png I am uncertain about what the purplish stuff indicates. My objective is to move the icon to t ...

javascriptmaterial-uimaterial-design

I'm curious if anyone has had success utilizing react-testing-library to effectively test change events on a draftJS Editor component

​I'm having trouble with the fireEvent.change() method. When I try to use it, I get an error saying there are no setters on the element. After that, I attempted using aria selectors instead. const DraftEditor = getByRole('textbox') Draf ...

javascriptreactjstestingdraftjsreact-testing-library

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

As someone new to developing Zendesk apps, I've been following the step-by-step guide available here. To Summarize I'm facing an issue with passing external API URLs to the AJAX call syntax within Zendesk's app.js file. You can find my sim ...

javascriptapizendesk-app