Material-ui: How to set the Height property to the outlined select component

[MaximKudriavtsev]

Hi,

I would like to change the default height of the Outlined Select component.

I can override default classes, but this way seems like an unstable.

What is the best way to achieve it?

Best regards!

[oliviertassinari]

@MaximKudriavtsev Your example looks good to me. Here is a version a bit updated:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

const styles = {
  root: {
    width: "120px"
  },
  input: {
    padding: "10px 14px"
  }
};

class SimpleSelect extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div>
        <OutlinedInput
          className={classes.root}
          classes={{ input: classes.input }}
        />
        <Select
          value={20}
          className={classes.root}
          input={<OutlinedInput classes={{ input: classes.input }} />}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </div>
    );
  }
}

export default withStyles(styles)(SimpleSelect);

It shoud be great to add a demo in the documentation! The issue is related to #14265. I think that we should allo the outline to work without a label.

[MaximKudriavtsev]

@oliviertassinari,

Thank you for example.

In my opinion, the number values maybe change in the future releases. In the example above I change padding property, if the component's height will be changed this all markup will be broke. It would be great to have the height property, that changes the Select height and OutlineInput height both.

[bvreddy10]

@oliviertassinari,
what if we have Label for select? the label is not aligning center (label has to be vertically center) . I have set the padding according to your css, can u resolve this type of issue?

Thanks in advance,
Vikranth Reddy B

       <FormControl variant="outlined" className={classNames(classes.formControl, 
       classes.formControl_2)}>
                <InputLabel
                    ref={ref => {
                    this.InputLabelRef = ref;
                    }}
                    htmlFor="cuisines"
                >
                    Cuisines
                </InputLabel>
                <Select
                    className={classNames(classes.select)}
                    value={this.state.cuisine}
                    onChange={(event)=>{this.filters(event)}}
                    input={
                    <OutlinedInput
                        labelWidth={this.state.labelWidth}
                        classes={{ input: classes.input }} 
                        name="cuisine"
                        id="cuisines"
                    />
                    }
                >
                    <MenuItem key={''} value={''} name={''}>Select Cuisine</MenuItem>
                     {this.state.cuisineDropDown.map(name => (
                    <MenuItem key={name._id} value={name} name={name.name} >
                        {name.name}
                    </MenuItem>
                    ))}
                </Select>
            </FormControl>

filters.zip

[tralawar]

I had an issue where I wanted my select to match the same height as size='small' text fields.
I was able to fix this by adding margin='dense' to the <FormControl margin='dense'/> component
FROM THIS

TO THIS

[brunostuder]

@tralawar Thank you it's working perfectly!!

[roggeo]

Thank you Tralawar.
For me it's working very well <FormControl variant="outlined" size="small">

[lestgabo]

@roggeo thanks Roggeo for your answer! It's just as good, if not better than Tralawar's answer because the code is more understandable and more common than margin="dense"

[bilobom]

if you're not using FormControl , then you can pass margin='dense' to the OutlinedInput

       <Select
          value={20}
          className={classes.root}
          input={<OutlinedInput margin='dense' />}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>

[shamseerahammedm]

@tralawar Thank you !! @oliviertassinari Can we consider a size option for select component ?

[oliviertassinari]

@shamseerahammedm the size prop can already be used with the input.