What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application.

This particular page consists of text and a button aligned vertically, along with a second set of text and another button that are initially hidden but can be revealed by clicking the first button. However, when attempting to hide the second set of text and button by clicking the second button, then re-clicking the first button, there is an unexpected behavior - the first button suddenly moves across the page.

Interestingly, this issue seems to only occur in Chrome, as Firefox does not exhibit the same behavior. Additionally, resizing the browser window causes the button to return to its original position after it has jumped.

In order to provide more context and visualization of the problem, I have attached a link below to a screenshot showing the initially-hidden content displayed:

react-material-ui-app-page-screenshot

To further investigate this issue, I have created a demo on CodeSandbox which demonstrates the button jumping phenomenon. You can access the demo using the following link:

cssreactjsflexboxmaterial-uigrid-layout

Answer №1

After examining more closely, it seems to be related to using flex-wrap: wrap on a 

display: flex; flex-direction: column;
. 

wrap={"nowrap"}

...solves the issue.

View it here.

It's uncertain if this is a bug or not. What is the expected behavior of a flex column container with flex-wrap: wrap and no defined height, regarding column width?
Perhaps the intended behavior is to minimize the column size.

The problem lies in the inconsistency of how it displays under different circumstances. Regardless of what the desired outcome should be, consistency is key.

Answer №2

To stop this behavior, simply include a width on line 19.

19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>

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

Securing routes with server-side validation

I've been experimenting with different methods to secure a route for unauthenticated users, but I'm facing difficulties in implementing it effectively. One common issue I encountered while attempting authentication from getServerSideProps was th ...

reactjsauthenticationnext.jsserver-side-rendering

Is it possible to generate two types of helper text in Material-UI React?

I am a beginner in the world of MUI and React, but I'm taking on some small tasks to ease the workload of our busy developers. One task I'm tackling is adding descriptive helper text to a few fields retroactively. Currently, we have error helper ...

reactjsmaterial-ui

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

What is the best way to eliminate a specific value within a flatmap?

This is the flatMap: const choices = names.flatMap( (item) => item.name + " - " + item.size + "- " + item.category ); console.log(choices): https://i.stack.imgur.com/MO4b1.png If the item.category is equal to S-XL, how can ...

javascriptreactjs

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

Currently, I am working on a project that involves creating multiple checkboxes. My goal is to implement a specific functionality where only one checkbox can be checked in each group with the correct or incorrect value. Once all groups have been selected, ...

javascriptjquerycssarrayshtml

It is impossible to alter the data contained within the input box

Objective: Upon clicking a button to display the modal, the selected data (first and last name) should be inserted into an input box and editable. The user should be able to modify the data. Issue: The data entered into the input box cannot be edited ...

javascriptreactjs

What distinguishes the built-in Head component in Next.js from using the head tag directly in JSX?

Hey everyone, I am hoping this question fits well within this community. I've been confused about how the built-in Head component in Next.js actually works. My assumption is that Next.js automatically generates metadata and then Head either replaces o ...

htmlreactjsnext.js

Using force-directed layout to access and retrieve specific data from external or internal data sources

Just starting out with d3js and currently working on modifying the Force directed layout found at http://bl.ocks.org/mbostock/1153292 I have managed to make it so that when I hover over the node circles, the corresponding source value filenames should app ...

javascripthtmlcssjson

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Is it acceptable to replicate another individual's WordPress theme and website design in order to create my own WordPress website that looks identical to theirs?

It may sound shady, but a friend of mine boasts about the security of his WordPress website, claiming it's impossible to copy someone else's layout or theme. However, my limited experience in web development tells me otherwise. I believe it is po ...

htmlcssjsonwordpresswordpress-theming

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

The reasons behind cancellations in API requests

Within the parent component, the open and setOpen states were passed down to the child component. The fetchData function included open as a dependency in the useEffect hook. In the child component, open was also added as a dependency for another fetchDat ...

reactjsnext.jsdependencies

What is the technique for arranging the display of a component in React?

Is there a way to dynamically render a component in my react-app at a specific date and time, like 6.00PM on October 27, 2022? I want to release a form for signing up starting from that exact moment. The timestamp information will be stored in my database ...

javascriptreactjsdatedatetime

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

htmlcssbootstrap-4

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

Experiencing an issue with react-bootstrap when running npm start

Recently, I encountered some issues while running a react-js app. However, there were no problems during the npm install process. Package Versions: react: "^16.10.2" react-bootstrap: "^1.0.0-beta.16" I attempted the following steps to resolve the issues ...

node.jsreactjsnpmpackage.jsonreact-bootstrap

Saving moveable objects on a Kanban board to firebase

As part of my project, I have developed a Kanban Board with 3 columns - To Do, Doing, and Done. Each column is populated with tasks, and I have successfully linked actions such as adding, deleting, and modifying tasks and columns to Firebase. However, ther ...

reactjsdatabasefirebasenext.js

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Is there a way to determine the number of occurrences of the 'value' key within an object that is part of an array, and then add the count to each value if applicable? In this case, 'a' represents the original data var a = [ { id: ...

javascriptreactjsvue.jslodashunderscore.js

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder