5

I am developing a React app using Material UI. I am having an issue with one page of the app.

That page contains some text and a button, which are vertically aligned with one another. It also contains a second piece of text and a second button, which are vertically aligned with one another and which are initially hidden. The first button can be used to reveal the second piece of text and the second button. The second button can be used to conceal the second piece of text and itself (i.e. the second button).

Here's a link to a screenshot of the page with the initially-hidden content visible (I don't have enough StackOverflow rep points to embed an image yet).

react-material-ui-app-page-screenshot

The issue I'm having is:

When I click the first button (i.e. the "SHOW" button), then click the second button (i.e. the "HIDE" button), then click the first button again; the first button jumps across the page. More specifically, it goes from having its right edge touch the right edge of the <body> element, to having its left edge touch the right edge of the preceding piece of text.

Once the button has jumped, when I resize the browser window (e.g. by clicking and dragging the Chrome application window), the button returns to its original location.

Note: The jumping happens in Chrome, but not in Firefox.

Do any of you know why that is happening?

I created a demo of this phenomenon on CodeSandbox. Here's a link to that demo:

ongobongo
  • 53
  • 1
  • 5
  • Looks like a bug from Chrome, here is a similar issue you might want to look at: https://stackoverflow.com/questions/42161458/is-there-a-bug-in-chrome-with-justify-content-space-between-and-min-height – sanfalero Oct 17 '19 at 21:58

2 Answers2

3

Upon a closer look, it appears to have to do with having flex-wrap: wrap on a display: flex; flex-direction: column;. 

wrap={"nowrap"}

...fixes it.

See it here.

It's difficult to say if it's a bug or not. What should we expect from a flex column container with flex-wrap:wrap and without a set height, in terms of column width?
Because the correct behavior might be to shrink the column as much as possible.

The bug is that it renders differently in different contexts. Whatever the correct behavior is, it should be consistent.

tao
  • 82,996
  • 16
  • 114
  • 150
2

You can prevent the behavior by adding a width to line 19. 

19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>
Nix
  • 58
  • 2
  • 8
  • This answer works for me, too. I marked the other one as "most helpful" because it was at the same abstraction level as that at which I happened to already be working (i.e. using props specific to Material UI components instead of using CSS rules)--not including the dotted lines I added for debug in the demo. I "upvoted" both answers and Stack Overflow told me that, while it would "record" both upvotes, it would not display them publicly because the number of rep points I have is so low. Thank you! – ongobongo Oct 20 '19 at 22:26