score:4
resizing by the user is turned off (via resize: "none"
) for textfield
here in inputbase
: https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/inputbase/inputbase.js#l140.
below is an example of how to turn it back on:
import react from "react";
import { makestyles } from "@material-ui/core/styles";
import textfield from "@material-ui/core/textfield";
const usestyles = makestyles(theme => ({
root: {
"& .muitextfield-root": {
margin: theme.spacing(1)
}
},
textarea: {
resize: "both"
}
}));
export default function multilinetextfields() {
const classes = usestyles();
return (
<form classname={classes.root} novalidate autocomplete="off">
<div>
<textfield
id="outlined-textarea"
label="multiline placeholder"
placeholder="placeholder"
multiline
variant="outlined"
inputprops={{ classname: classes.textarea }}
/>
</div>
</form>
);
}
css documentation for resize: https://developer.mozilla.org/en-us/docs/web/css/resize
multiline textfield demos: https://material-ui.com/components/text-fields/#multiline
score:0
i was able to get it to work thanks to ryan cogswell. stupid me, though i wrapped the textarea in a box and applied classname to the box (which didn't work), i should have applied it to the textareaautosize directly.
there's a bug in vscode intellisense where it shows 'classes' as a property but not 'classname' so i assumed it didn't exist.
here's the code:
const formstyles = makestyles((theme) => ({
root: {
width: '100%',
},
button: {
margintop: '20px',
marginright: theme.spacing(1),
},
buttons: {
display: 'flex',
justifycontent: 'flex-end'
},
textarea: {
width: '100%',
},
}));
<textareaautosize
rowsmin={3}
aria-label={info.label}
name={info.name}
placeholder=''
defaultvalue=''
classname={classes.textarea}
/>
i could not get the drag icon to show up in textfield, so didn't use it. but i would appreciate an example of textfield using multiline and resizing.
thanks ryan!
score:0
here's the trick i used. i wrapped it in a flex container and used align-items to stretch the width to cover the size of that container.
<stack
direction="column"
justifycontent="center"
alignitems="stretch"
spacing={2}
>
<textareaautosize
label='title'
value={pub.title || ''}
onchange={(e) => pub.title = e.target.value}
variant='outlined'
sx={{m: 1}}
size='small'
/>
</stack>
score:4
you can change the style prop of the textareaautosize check here
<textareaautosize
rowsmin={3}
placeholder=''
defaultvalue=''
style={{ width: "100%" }}
/>
Source: stackoverflow.com
Related Query
- How do I set a width for the TextAreaAutoSize component in Material-UI?
- Material UI How to set external styles for sub-components with one main common style for the entire component
- how to make material data grid width to fill the parent component in react js
- How to set the width of a React component during test?
- How to set the width of material ui Popper to its container's width while setting disable portal as false
- How to set same dynamic width of component child for all instances? Web Components
- How to set the background color of material ui drawer component with styled-components?
- How to contain the width of the main component in Material UI Drawer component?
- With Semantic UI React, how to set the width and height for Image Avatar?
- Material-UI How to set minWidth and maxWidth of MenuItem (popover) according to the width of the select component
- How to set the width of Material UI drawer
- How do I set the text color of primary raised buttons for React Material UI?
- How to set the limit for the dragging the div vise versa no more than minimum width which is 200
- how to set the border color to Card component in React material ui
- How do I set the width of a component in my React web-app based off the output of a variable
- How to lock the position of close button with paper component of modal in material ui for responsive screen?
- How to set different values for different material select using states in functional component of react
- How can I set 2 values for one variable, and the component will render with one value, depending of some prop input
- How to Swap 2 different background colours for the Paper component between dark and light theme in material UI?
- How to set the size attribute of a Material UI Select component with multiple options?
- How to set the next/image component to 100% height
- How to override the width of a TextField component with react MUI?
- Figuring out how to mock the window size changing for a react component test
- How to make the whole Card component clickable in Material UI using React JS?
- How would I animate the width of a button based on percentage, and the same for it's backgroundColor?
- How do I set multiple lines to my tooltip text for Material UI IconButton?
- How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest?
- How can I set a nonce in Material-UI for the Content-Security-Policy?
- How to TEST async calls made in componentDidMount that set the state of React Component
- Compile error using the Component Lab > Autocomplete feature for SVG Icons in Material UI
More Query from same tag
- Upload image from blob url to s3 bucket
- Issues updating state in redux reducer
- How to dynamically create components with Tags?
- How to set the current state to the useState hook?
- Pass parameters with React Router
- react-router Link to post.id, keep post_index on the dom
- ReactJS: How to call a parent's setState() from this.props.children?
- How to link an image to a page dynamically with React Router Dom?
- React-Router: Component is not rendered but URL changes
- I can't get cards displayed horizontally using React bootstrapping
- Promise.catch in redux middleware being invoked for unrelated reducer
- Displaying name initials instead of profile picture
- how to check the actual DOM node using react enzyme
- Import'd React.Component not rendering with Typescript
- how to set draggable to false on mobile for framer motion OR change dimensions of dragging responsively for different screen sizes
- Bootstrap datepicker not working with Webpack
- I'm getting error about a Target library in React
- How to require('var') with var is local url in ReactJS?
- React prevent from toggle multiple modals
- Modal popping up at the wrong time due to state
- How to render images from code inside a create-react-app project
- React Component gets unmounted and i don't know why
- How to ignore raw loader for testing webpack
- React: How can I call a method only once in the lifecycle of a component, as soon as data.loading is false
- Unit testing of React/Redux applications
- React-Table: exception thrown calling 'getResolvedState()' on component ref
- How to push child arrays into items in an array to local React state, via a Firebase snapshot
- How to display the correct tooltip text while mapping over a list?
- Issue with the const keyword and methods declaration
- spreading props in makeStyles