I recently started using MUI for my react project. There are two layout components I am confused about i.e. Stack and Box
When should I use Stack over Box?
I know the use case of a box.
But I am not sure when to use a Stack component and what the difference between them is?
Box: The Box component serves as a wrapper component for most of the CSS utility needs.
The Box component packages all the style functions that are exposed in #mui/system.
Stack: Stack is like a flex container. The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.
Usage of Stack:
Stack is concerned with one-dimensional layouts, while Grid handles two-dimensional layouts. The default direction is column which stacks children vertically.
By default, Stack arranges items vertically in a column. However, the direction prop can be used to position items horizontally in a row as well.
Use the divider prop to insert an element between each child. This works particularly well with the Divider component.
You can switch the direction or spacing values based on the active breakpoint.
Ref: https://mui.com/components/stack/
Related
So I have the following question which I believe is quite valid.
So Box and Grid are Layout components which you are suppose to add other components inside those as far as I'm aware. However sometimes Box does the job for me and sometimes is Grid and SOMETIMES I use both at same time.
This question came to mind to me after I was trying to CENTER a component, so in this example when I use GRID I can center the component in the middle of the screen without any issues:
Grid Example:
ExampleA-Sandbox
Box Example:
ExampleB-Sandbox
I know I can just simply add pl={number} to the box component and then I can move the box to a desire location but that's not the point.
I have a working vertical column drag and drop React app using react-beautiful-dnd, but would like to 'invert' it so that Draggable items fall to the bottom of the Droppable div instead of floating to the top. Is this possible?
If I'm understanding you correctly, you'd like to have a list where when the container is not full, the items within that list are aligned to the bottom of the container?
If so, then yes - I would utilize flexbox.
Here is a good resource for flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are multiple different ways to implement this with flex. Pick your poison.
edit
Based on the code sandbox:
I would add a wrapper div to the bay component with the same height as what you have now. On the child div, add a dynamic height field that is dependent on how many tables the bay contains.
Users won't be able to drop into the entire column but you could style it to show the user where they need to drop when the column is empty.
I ended up just creating another invisible strip with flexGrow = 1 to push everything to the bottom.
I have a list of material ui cards that are in a react-beautiful-dnd list. I want to be able to move cards from one list to another and reorganize them (this is already done). I also want to be able to click, for example, the lower right corner of a card and resize it however I want. Is that possible? If so, how? I have tried wrapping the cards in thing like react-grid-layout objects, but with no success, while my react app still comes up the cards are not rendered.
Thanks in advance for any help.
I found a simple solution and thought I would share. All I needed to do was wrap each material UI Card in a ResizableBox from react-resizable. Then after that, so the dimensions of the Card would follow the dimensions of the ResizableBox, I used material UI makeStyles to apply a width and height of 100% to the Card. And that was it.
I'm trying to build a React component that includes react-select as child element of a flex container which, in turn, may contain other elements of variable size.
The main problem is that I'm currently not able to limit react-select to the width of the parent flex container. This is what happens when the label of the selected option is too long:
Is there a way (any way really) to prevent react-select from overflowing?
Some issues that might be related to this are:
https://github.com/JedWatson/react-select/issues/323
https://github.com/JedWatson/react-select/issues/1127
Full sample below:
As suggested here, simply styling the react-select component with minWidth: '0px' does the job.
Some time ago I noticed that nested scrollable containers behave nice - for example several containers scrollable in their X-axis nested in a container that is scrollable in its Y-axis - and decided to take advantage of this by creating a custum composite swich component based on that and snapToGrid.
However this never worked out nicely since snapToGrid had its problems.
When I talk about well-behaviour of nested scrollable components I mean you can tap on a nested scrollable component and it will just work well being able to scroll either the component itself or its also scrollable parent in the other axis.
What would I need to do in a custom scrollable component to achieve the same well-behaviour like it works with nested containers?
What I'd require of such a component - for example a switch - was beeing able to switch it horizontally while, once it notices that horizontal dragging threshold is reached, and not to affect its parent containers vertical scrolling then. The other case where, after a certain threshold of vertival scrolling in the parent component, it locks to vertically scrolling the parent container should already work, right?
By the way - with the out-of-the-box CN1 OnOffSwitch this does not work. When they are placed in containers nested in a container with BoxLayout.Y the this way represented list cannot be scrolled when tapping one of the OnOffSwitches and dragging vertically.
Events in Codename One are delivered from the system in the following order:
The parent Form - e.g. you can override the pointer* callbacks
Form listeners - e.g. appPointer*Listener on Form
Builtin scroll if you are scrolling
Focused component
I'm assuming you used focus to grab events which essentially blocks child components from grabbing the events.
If you did such a thing you need to deliver the events to the child yourself using the pointer callbacks on the given component. You can find the component at a given x/y coordinate using getComponentAt(x, y).