score:4

Accepted answer

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>
  );
}

edit textfield resizable

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%" }}
/>

Related Query

More Query from same tag