Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select horizontal alignment issue...

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

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:

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

josephrussellcommented, Jul 3, 2017

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.

steviesamacommented, Jun 28, 2017

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.


Read more comments on GitHub >

github_iconTop Results From Across the Web

Horizontally align options in select? - html - Stack Overflow
I am working on styling an option tag for a project I am working on but I am unable to figure out if...
Read more >
Align text in a cell - Microsoft Support
Select the cells that have the text you want aligned. On the Home tab choose one of the following alignment options: Alignment of...
Read more >
Bootstrap Horizontal alignment - examples & tutorial
Bootstrap 5 horizontal alignment utilities position elements on the x-axis. ... Choose from start (browser default), end , center , between , around...
Read more >
Creating Corridor - Having Problems Selecting Horizontal ...
Option 2: Go to File > Project Explorer > Civil Model. Locate the alignment that you wish to use to create a corridor....
Read more >
Hi everyone, When I try to create an alignment relation report , the html file comes out blank even though I select the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found