How can I create this semi-fluid layout in React Material UI?

0
votes

I'm trying to build the following layout for a full-screen desktop web application using React Material UI:

ui structure

  • The title bar would be the usual AppBar
  • The Toolbar on the left has a fixed width and stretches to the bottom of the screen
  • The Bottom area has a fixed height
  • The main area and side area fill the area that remains, with the side area being about 30% as wide as the main area

Note that this is for a 100% width, 100% height application (no vertical scrolling). None of the areas require sliding (i.e. drawers).

Although I would be able to code this using plain CSS, this project requires a "Material UI approach". I'm feeling overloaded by the many layout options and have been unable to determine what Components would be adequate for this semi-fluid layout.

What would be the "Material UI" way of implementing this?

1
reactjsmaterial-ui

1 Answers

3
votes

After no answers and some experimentation, I found that Material UI provides the "Grid" component as an abstraction of flexbox elements.

I solved this using the following Grid properties:

  • flexBasis to create the fixed width elements
  • flexGrow: 1 to make une of the grid elements grow to fill the remaining space
  • height: 100% on all containers of the structure (including HTML and BODY) to fill the screen height.

Different values of flexGrow allow to give some columns a relative width, akin to giving percentages.

I'm not writing the code involved as flexbox has been broadly discussed in StackOverflow; the answer to this question was "use the Grid element". The following link explains the concepts clearly: A complete guide to FlexBox