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.
Related
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/
How can I specify a custom elevation for a MUI Button?
In MUI Button API documentation a disableElevation is documented (which seems to works as an alias of elevation={0}) but I can't find how I can specify an elevation different from the default one.
Keep in mind that contained buttons use different elevation when hovered and when active/focused, so you need to take that into account when you customise them.
#mui/system has a convenient way of applying shadows on elements without the elevation prop, using the sx prop. The syntax is sx={{ boxShadow: 3 }}, which is the same as elevation={3}. The numbers go from 0 to 24.
Codesandbox
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.
Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete
V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/
So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the
I was hoping someone may have had this issue and had a solution they'd like to share?
Thanks guys!
I had a similar problem and solve it using 'disablePortal' Autocomplete property:
You can take a look at 'disablePortal' definition in here:
https://material-ui.com/api/autocomplete/#props
disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.
I also had to add some styles to get pop up get positioned relative to input component.
Here is some sort of example:
const useStyles = makeStyles({
popperDisablePortal: {
position: 'relative',
}
})
const classes = useStyles()
<Autocomplete
classes={classes}
disablePortal={true}
{...props}
/>
So you may have to:
set up disablePortal property
define associated popperDisablePortal style with 'relative' position
EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.
The new Stepper component is awesome, except that the height of each step won't adjust properly when its child components change from hidden to visible, or vice versa via CSS. Specifically, if a component's style changes from display: 'none' to display: 'inline', the height of content will remain the same. As a result, the newly visible component won't show properly.
However, if the component is dynamically created (as opposed to be made visible with CSS), the height would adjust properly. Unfortunately in my case, I do need the component to be there even when they're not visible.
Has anyone encountered similar problem? I'm using react.js v0.14 and material-ui v0.15.0-beta.1.