Nesting

[CiberNin]

How do I put multiple inputs inside a container or paper or form? Once I've dragged in the first text input it won't let me drag in any more.
Also how do I make a datagrid stretch to fill the screen.

[apedroferreira]

Hi @CiberNin , it seems like these components are broken as of a recent change.
Thanks for letting us know, I'm really sorry for the the inconvenience and will fix it as soon as I can as a top priority.
Will also add tests that make sure these types of container component don't break again.

As for stretching a Data Grid, if you mean resizing it vertically you should be able to drag the bottom edge when you select it.
Let me know if you think this could be more intuitive somehow.

[CiberNin]

When I say stretching, I mean How can I make it flex to fill all the remaining space in the screen? It seems the height property is applied to an element wrapping the table itself, so I can't figure out how to make it expand.

[apedroferreira]

I see, can you tell me exactly how you're trying to make the table fill the space?
Are you trying to use the sx prop of the DataGrid component? If so, what styles are you trying to add?

I'm working on a solution in #2625

[CiberNin]

Well the way I'd expect to work is just providing "height": 100% to the datagrid
But that does not work since the element that receives the sx is wrapped by another element with fixed height.
Maybe it would make sense to expose the height in the component pane?

[apedroferreira]

True, in our current layout model there's a box around every component, so there isn't really a good way to make a full-height element (height: 100% would not work for those reasons you mentioned).
It's probably best to just set a fixed height manually by dragging the bottom border of the DataGrid - this is the only way to change this height currently. We could think about exposing this height in the component panel, but it still would probably be a fixed value for now.
We'll stay aware of this and if more users want this to be possible we could try to see how to enable it.

[skavan]

The most powerful way, that I can think of, is to support mui gridv2, or a toggle that turns a container into a css grid.
Then (presuming the grid can accept components, or other grids, in its client area(s)), anything is possible...

[apedroferreira]

Hi @skavan , sorry but I didn't fully understand the details of your proposal. Are you also looking to have an element with the full-height of the page or something similar?
If so, feel free to create a new issue for the feature and provide some examples / use cases related to your proposal, that would really help us consider it!