Material UI select and autocomplete box not lined up

786 views Asked by At

Screenshot of misaligned drop-down boxes

Hi! I'm a beginner ReactJS engineer. I added 2 drop-down boxes from material UI, the left box is the Autocomplete from materialui/labs and the right box is the Select from materialui/core. They're both placed in the same component with the same styling applied to it, but the Autocomplete is slightly off. Is there a simple fix to this misalignment?

          <AutocompleteComponent
            formStyle={{ width: 200 }}
            label={'Build'}
            options={builds}
            value={selectedBuild}
            handleChange={handleFilterSelectChange('selectedBuild')} />
          <SelectComponent
            formStyle={{ width: 120 }}
            label={'Sheet Layout'}
            options={sheetLayouts}
            value={selectedSheetLayout}
            handleChange={handleFilterSelectChange('selectedSheetLayout')} />

For select component:

const SelectComponent = props => {

return (
    <FormControl
      className={className}
      required={required}
      error={error}
      margin={margin}
      style={formStyle}
    >
      <InputLabel>{label}</InputLabel>
      <Select
        inputRef={inputRef}
        value={value}
        style={style}
        onChange={handleChange}
        disabled={disabled}
        onClick={onClick}
        onFocus={onFocus}
        onBlur={onBlur}
      >
        {excludeNone ? null : (
          <MenuItem value="">
            <em>{noneLabel ? noneLabel : "None"}</em>
          </MenuItem>
        )}
        {optionsExist(options)}
      </Select>
      {helperText ? <FormHelperText>{helperText}</FormHelperText> : null}
    </FormControl>
  );
};

For the autocomplete component:

class AutocompleteComponent extends React.Component {
render() {
return (
      <FormControl
        className={className}
        required={required}
        error={error}
        margin={margin}
        style={formStyle}
      >
        <Autocomplete
          style={style}
          disabled={disabled}
          onClick={onClick}
          onFocus={onFocus}
          onBlur={onBlur}
          options={options}
          getOptionLabel= {option => option.label && option.label.toString()}
          id="auto-complete"
          autoComplete
          includeInputInList
          renderInput={params => (
            <TextField
              {...params}
              label="Builds"
              margin="normal"
              fullWidth
              position="center"
            />
          )}
          renderOption={(option, { inputValue }) => {
            const matches = match(option.label, inputValue);
            const parts = parse(option.label, matches);

            return (
              <div>
                {parts.map((part, index) => (
                  <span
                    key={index}
                    style={{ fontWeight: part.highlight ? 700 : 400 }}
                  >
                    {part.text}
                  </span>
                ))}
              </div>
            );
          }}
        />
        {helperText ? <FormHelperText>{helperText}</FormHelperText> : null}
      </FormControl>
    );
  }
}

Thanks!

0

There are 0 answers