CODEWITHSUNDEEP
cssreactjsmaterial-ui
user7605119
user7605119

Reputation:

Material-UI text field with dynamic rows

I'm trying to have a multiline TextField component that takes all available space depending on a device.

textfield

I know fullWidth but is there a way to have something like fullHeight in rows setting, depending on a device that it is displayed on?

Upvotes: 1

Views: 7354

Answers (2)

kulraj chavda
kulraj chavda

Reputation: 121

You basically want your TextField element to take full height and width of the container.

For width you can simply add fullWidth prop to your TextField element,

<TextField fullwidth/>

For adding required height,

If you have prop Multiline={true} in your TextField element, Material Ui sets numbers of rows dynamically and height is adjusted according to number of row (everytime user hits enter new row is generated), due to this you can not set specific height.

Now to be able to set height manually, you must add prop rows={1}*

<Textfield multiline rows={1} fullwidth />

Now, you should be able to set height with JSS,

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({

  inputMultiline : {
    "& .MuiInputBase-input" : {
        height : '100vh', //here add height of your container
      },
  }

}));

Now simply add this to className of your TextField element,

<TextField multiline fullWidth row={1} className={classes.inputMultiline} />

For any doubt refer to, material ui TextField API here and material ui styles API here.
(although, no proper information regarding this is available in docs)

Upvotes: 3

Melvynx
Melvynx

Reputation: 1175

A solution is to manupulate Material-UI classes using JSS.

I change the height of the input base and align the text at start vertically.

const useStyles = makeStyles(() => ({
  input: {
    height: "100%",
    "& .MuiInputBase-root": {
      height: "100%",
      display: "flex",
      alignItems: "start"
    }
  }
}));

Add the input classes to your input and it's work.

All the exemple bellow on this codesandbox.

Upvotes: 5

Related Questions