Material UI All components in the same line, taking full width

I have these components here:

Sandbox: https://codesandbox.io/s/6ipdf?file=/demo.js:78-129

   <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
        <BootstrapInput id="demo-customized-textbox" />
      </FormControl>
      <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel id="demo-customized-select-label">Age</InputLabel>
        <Select
          labelId="demo-customized-select-label"
          id="demo-customized-select"
          value={age}
          onChange={handleChange}
          input={<BootstrapInput />}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
        <NativeSelect
          id="demo-customized-select-native"
          value={age}
          onChange={handleChange}
          input={<BootstrapInput />}
        >
          <option aria-label="None" value="" />
          <option value={10}>Ten</option>
          <option value={20}>Twenty</option>
          <option value={30}>Thirty</option>
        </NativeSelect>
      </FormControl>

I want the first input(the text input) to take all the remaining space on the page, how do I do that?

Answer

You can wrap the form control components using Box instead of the current div.

<Box display="flex">
  <FormControl sx={{ m: 1, flexGrow: 1 }} variant="standard">
    <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
    <BootstrapInput id="demo-customized-textbox" />
  </FormControl>
  ...
</Box>

If you think the select components have the large width, then you can set the custom width.

Refer to flexbox

Advertisement

Answer