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
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'm learning how to use the MUI Data Grid React Component (MIT licensed version).
Is it possible to add a title to a Data Grid? Just some simple centered text above the column headers but below the Data Grid border would be great, though having custom components in a title would be ideal.
Is there a built in way to do this?
edit: Here is an example of what I'm trying to do. In this screenshot, I did it by wrapping the DataGrid in a div and giving that div a border, and removing the DataGrid border.
Is there some way to do this natively with the Data Grid interface?
Solved! When constructing the Data Grid, you can use the components prop, which accepts a ToolBar component.
<DataGrid
{...}
components={{Toolbar: DataGridTitle}}
/>
Where DataGridTitle is your own component that can have a title in it. In this case, I'm using:
function DataGridTitle() {
return(
<Box style={{width: "100%", display: "flex", justifyContent: "center", alignItems: "center"}}>
<Typography variant="h5">Users</Typography>
</Box>
)
}
And it works perfectly:
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 would like my tab buttons to spread out across the entire screen.
When the screen width is too skinny to fit all the tabs, I would like the scroll buttons to show up.
MaterialUI has variant='scrollable' and the variant='fullWidth'. It does not appear to allow both of these to be used at the same time.
If I use the property scrollButtons='auto' in combination with variant='fullWidth' I don't get scroll buttons when things get to skinny.
Is there a mechanism for letting this work? Centering the buttons mitigates the issue somewhat, but isn't the real answer.
I know this question has been asked a while ago but in case someone would wonder, here is what I did:
import { Tabs, Tab } from '#mui/material'
<Tabs {...propsTabs} variant="scrollable">
<Tab {...propsTab1} sx={{ minWidth: "fit-content", flex: 1 }} />
<Tab {...propsTab2} sx={{ minWidth: "fit-content", flex: 1 }} />
{/*...*/}
</Tabs>
The MUI Tabs component has a { display: "flex" } property.
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.