CODEWITHSUNDEEP
reactjsmaterial-ui
Mel
Mel

Reputation: 2685

Material UI form input element - fullwidth with formHelper and endAdornment

I'm trying to figure out how to use the Material UI form input elements.

I'm trying to use this input as a full width item, that uses both a form helper and and endAdornment.

I have tried both the Input and the InputBase options, but each of these seem to restrict this composition.

This code sandbox shows the width issue using the Input component. Currently, the width container is set to fullWidth and the root class defines that as 90% - but the form input gets squished to a small size - and I can't see an attribute enforcing that.

When I try using the InputBase, i can have full width, but I can't use the form helper beneath the form input (it gets pushed onto the same line and appears after the InfoIcon).

Upvotes: 2

Views: 5756

Answers (1)

Ismael Padilla
Ismael Padilla

Reputation: 5566

That's because the input is occupying the full width of its parent container, which in this case is the FormControl, so you must make the FormControl wider to achieve what you want. For example, you can add a class to the FormControl and style it so it spans the full width of it container (see code below). You can see it working here.

const useStyles = makeStyles(theme => ({
  root: {
    padding: "2px 4px",
    // display: 'flex',
    alignItems: "center",
    width: "90%",
    margin: "auto"
  },
  input: {
    marginLeft: theme.spacing(1),
    flex: 1
  },
  iconButton: {
    padding: 10
  },
  divider: {
    height: 28,
    margin: 4
  },
  formControl: {
    width: "90%"
  }
}));

export default function ProposalDemoForm() {
  const classes = useStyles();

  return (
    <div>
      <div style={{ marginLeft: "3vw" }} />
      <Paper component="form" className={classes.root} elevation={0}>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="component-helper">Title</InputLabel>
          <Input
            id="component-helper"
            placeholder={"name"}
            fullWidth={true}
            onChange={"handleChange"}
            aria-describedby="component-helper-text"
            endAdornment={
              <InputAdornment position="end">
                <Divider className={classes.divider} orientation="vertical" />
                <IconButton
                  color="primary"
                  className={classes.iconButton}
                  aria-label="directions"
                >
                  <InfoIcon />
                </IconButton>
              </InputAdornment>
            }
          />
          <FormHelperText id="component-helper-text">
            <a href="link.com" className="bodylinks" style={{ float: "right" }}>
              Test link in helper
            </a>
          </FormHelperText>
        </FormControl>
      </Paper>
    </div>
  );
}

Upvotes: 2

Related Questions