I have a blueprintjs dialog :
<BP.Dialog iconName="application" isOpen={this.state.fieldformopen} ...>
When the state fieldformopen changes, the dialog appear. But it appears with a growing animation. This is a problem since the dialog is quite full of things, and the animation is slow and discontinued.
I don't see any way of disabling the animation. The fields transitionDuration and transitionName are set only when changing css.
Thanks for any information to disable the animation.
Add this style to the Dialog component:
style={{ transition: 'none' }}
So your component would look like:
<Dialog
style={{ transition: 'none' }} >
This removes the growing animation, but still keeps the more subtle fade animation.
Related
The wipeable drawer from MUI has this issue when the view height is changed it stutters to its bottom position.
It can be replicated in their sandbox: https://codesandbox.io/s/du4v38?file=/demo.j toggle responsive preview and change the height you swill see what i'm talking about.
If I comment out the height line in the Global component it works properly but on refresh disappears until you open and close using toggle.
<Global
styles={{
'.MuiDrawer-root > .MuiPaper-root': {
height: `calc(50% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}
/>
This is really annoying on iOS Safari as with the new update the search bar is now on the bottom and disappears when you scroll down causing the drawer to always stutter its way down.
I want a stacked progress bar tracking two fields:
valueBuffer: amount unlocked out of total. The light blue bar.
value: amount claimed out of unlocked. The dark blue bar.
Variant buffered suits my use case but the dotted line animation is annoying. How do I disable the animation and replace it with a regular bar?
<LinearProgress variant="buffer" value={50} valueBuffer={70} />
If this is not possible, what is the alternative to have a bootstrap style stacked progress bar?
You can use add a custom style to .MuiLinearProgress-dashed and modify the default dashed styles using sx attribute like this:
<LinearProgress
variant="buffer"
value={progress}
valueBuffer={buffer}
sx={{
"& .MuiLinearProgress-dashed": {
backgroundColor: "lightgrey",
backgroundImage: "none",
animation: "none"
}
}}
/>
You can take a look at this sandbox for a live working example of this solution.
I am using a <TextareaAutosize> component from the Material UI Library in my React app, as such:
<TextareaAutosize
minRows="2"
style={{resize: "vertical"}}
/>
This creates a textarea that autosizes based on the size of the content. I have styled it so that the user is only able to manually expand vertically.
The current behavior is that, when the user shrinks the textbox, there is no way to view the content out of sight. My goal is to bring up the scroll bar when the user shrinks the text area.
View CodeSandbox to test.
Simply add overflow: 'auto' to the style attribute.
<TextareaAutosize
minRows="2"
style={{ width: '50%', resize: 'vertical', overflow: 'auto' }}
/>
Codesandbox
I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.
<div className="confirmation-drawer">
<Drawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}>
<!-- Drawer content goes here -->
</Drawer>
</div>
I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.
The code below worked for me. It uses the preferred one-off styling method in the MUI docs. Transitions work without any additional tweaks. Of course make sure you have a 'relative' element up in the DOM tree.
<Drawer
sx={{
'& .MuiDrawer-root': {
position: 'absolute'
},
'& .MuiPaper-root': {
position: 'absolute'
},
}}
>
</Drawer>
what #Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.
as i said its merely a workaround but i hope it helps somebody.
try this:
import {styled, Drawer as MuiDrawer} from '#mui/material'
const Drawer = styled(MuiDrawer)({
position: "relative", //imp
width: 240, //drawer width
"& .MuiDrawer-paper": {
width: 240, //drawer width
position: "absolute", //imp
transition: "none !important"
}
})
If you want transitions then use collapse.
<Collapse orientation='horizontal' in={open} >
<Box> ... </Box>
</Collapse>
The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.
If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.
https://material-ui.com/api/accordion/
That will allow you to have a small "drawer"-like element that other components can be hidden inside of.
I am trying to create a dialog in material ui which does not blocks the main content.
With my below code i am only able to hide backdrop but not able to disable the backdrop.
<Dialog open={this.state.open} onClose={this.handleClose} hideBackdrop={true} >
Can someone please address my this concern on how to create modals using material-ui which does not blocks the main content
I just wanted to post this as a separate answer. The OP was able to solve his problem by disabling pointer events on the root dialog/modal:
const StyledDialog = withStyles({
root: { pointerEvents: "none", },
paper: { pointerEvents: "auto" }
})(props => <Dialog hideBackdrop {...props} />);
I also tested the following and it worked as well (should also work with Modal component). Note, I also had to use disableEnforceFocus, which is a property of the Modal component. You should be aware that there are implications for accessibility when doing this. It's on you to handle the accessibility correctly.
<Dialog
disableEnforceFocus
style={{ pointerEvents: 'none' }}
PaperProps={{ style: { pointerEvents: 'auto' } }}
>
...
</Dialog>
This behavior is inherent to modals and Dialog is based on Modal. If you don't want it to block the main content, then one option is to use Popper instead of Dialog.