Stop browser window from trying to accommodate for the item in Appbar Tabs, maybe?

user_11749004 0
Viewed 87

I learn react JavaScript and now I have this problem.

I have a material ´AppBar´ with material ´Tabs´ that work ok but there is one strange thing happening. When I select a ´Tab´ and populate it the browser window is jumping up/down very annoying. This does not happen if I zoom out browser window to smaller size.

I have no clue how to start creating a question here in Stackoverflow to represent this problem so I created a video to start with, and will add code after you guys comment on the video what I should do.

I learn fast and new to this please advice,,

Here's the clip with sound also

material-ui reactjs browser
1 Answers

The problem is that the contents of the tabs are different sizes and the browser is adjusting the windows overflow (this is standard behavior as nickbullock mentioned). This is causing the page to get longer in the Y axis as there's currently no space below the EDIT FILE HERE component.

A couple of things you may try:

  1. Set a minimum height style on the parent of the <Tabs/> component. This does pose a problem if the tab contents get longer than the minimum height. You would then experience the same problem.
  2. Add a margin below your EDIT FILE HERE component. Again, you would have the same problem if the tab contents were vastly different in size.
  3. Add margin like in option2 above and then make all tabs the same height. Have the tab's contents overflow on the Y axis.
user_16119990
Related