Select horizontal alignment issue...

I’m using react-select in tandem with react-bootstrap, though I’m not sure if it’s really at odds with bootstrap. I have the following problem:

Type is an instance of select, and if I set both the react-bootstrap form-control and the react-select to overflow: hidden…no problems, alignment wise, except obviously you can’t see the select dropdown, but if I leave it be I get this. I had it lining up with input groups with dropdowns and inputs just fine, but this just doesn’t seem to want to work.

Below is the relevant JSX for the 2 components. All that is in inlineBlock is a display: inline-block equivalent.

<FormGroup validationState={this.validate('company_name', 'string')}
   style={inlineBlock} className='col-60'>
  <ControlLabel>Name</ControlLabel>
  <FormControl inputRef={((input) => this.firstInput = input).bind(this)}
    type='text' className='btn-block'
    value={this.state.company_name}
    placeholder='Unique string that identifies this app instance; will display as *Base App Name (App Instance Label)*'
    onChange={(e) => this.onTextChange('company_name', e)}/>
  <FormControl.Feedback/>
</FormGroup>
<span className='col-1'></span>
<FormGroup validationState={this.validate('state_name', 'string')}
  style={inlineBlock} className='col-39'>
  <ControlLabel>Type</ControlLabel>
  <Select Multi
    value={this.state.state_id}
    options={this.state.states}
    onChange={value => {
      this.setState({state_id: value});
  }}/>
</FormGroup>

Any help would be appreciated.

Thanks for using react-select!

If you are reporting an error please include a test case that demonstrates the issue you’re reporting! This is very helpful to maintainers in order to help us see the issue you’re seeing.

Here is a Plunker you can fork that has react-select loaded and supports JSX syntax: https://plnkr.co/edit/HTmtER9AMNcPoWhXV707?p=preview

You may also find the online Babel tool quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.

[josephrussell]

Thanks @steviesama, this is helpful. I was using bootstrap then switched to Bulma had saw the same issue and you encountered in both frameworks. This lines it up with the rest of the horizontally aligned controls, top: -1px looked closer in my case.

[steviesama]

I found a workaround. Overriding the following from table to:

.Select-control {
	display: inline-table;
}

Which leaves it hanging 2px too low so applying:

var selectFix = {
  'position': 'relative',
  'top': '-2px'
};

Puts it back in alignment.