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.
Related
I'm trying to render some pure components / a component which are basically RE charts in a carousel. So far I have implemented with images, but when I'm passing pure component / a component it is not showing anything.
I have created a sandbox which is having all the code which I have written so far with all the details SCSS, Re chart component and a main component. Please have a look and let me know what I'm missing or is there any other way where I can render components in a carousel.
Codesandbox URL
I'm not sure if this is what you are looking for.
Check my sandbox
The problem is that you need to define exactly the width and height of the svg also at its "containers", meaning that style={{ width: 500, height: 300 }} needs to be applied to li and ul too.
Also i changed a little bit the transform slide width.
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I want to render a react-chat-widget positioned over a google-map. When I do this the widget container (minimized space until clicked) is preventing me from being able to interact with part of the map. How do I overlap components so that only the 'active' component is functional?
You can fix this by CSS. Change the component CSS position: absolute. If required use z-index to make the component visible. I believe the problem is the overlapping component is occupying the entire widget space rendering the other one unclickable.
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.
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.