Select statements width sizes not working properly?

Question

I am trying to resize select statements within a form using react-bootstrap. However, they are not sizing quite right:

I want the last field to display as City, State(the select), Zip in that order. But for some reason, it's placing the State first. Basically, this is what I have:

<form inline> 
    <form control> 
    <select>
    <form control>

This is my following code:

      <Form inline className="margin-bottom-5">
                <FormControl
                    name='city'
                    type='text'
                    size='9'
                    placeholder='City'
                    value={this.props.generalInfoForm.get('city')}
                    onChange={(e) => {
                        this.props.onChange(this.props.generalInfoForm.set('city', e.target.value))
                    }}
                />
                {' '}
                <div className='col-xs-2'>
                <Select
                    className='col-xs-2'
                    ref='stateSelect'
                    autofocus
                    options={select_options['US']}
                    simpleValue
                    clearable={false}
                    name='selected-state'
                    size='3'
                    disabled={false}
                    value={this.props.generalInfoForm.get('state')}
                    onChange={(state) => {
                        this.props.onChange(this.props.generalInfoForm.set('state', state))
                    }}
                    searchable={false}
                /></div>
                {' '}
                <FormControl
                    name='zip'
                    type='text'
                    placeholder='Zip'
                    maxLength='4'
                    size='5'
                    value={this.props.generalInfoForm.get('zip')}
                    onChange={(e) => {
                        this.props.onChange(this.props.generalInfoForm.set('zip', e.target.value))
                    }}
                />
                {' '}
            </Form>

Why is the select displaying before the City field? I placed the select after the city field, but it's not working that way. Is it because of the col-xs-2? But I need to resize select statements, and the method that I found to do that was basically to wrap it in a div and set a col-**-** class.

What am I doing wrong? Is there anyway that I can put this select inline into the form without the weird spacing issues?

Any help would be greatly appreciated as I'm new to bootstrap, thanks!!!

score 1 · Answer 1 · answered Nov 25 '16 at 05:14

Yeah it looks entirely like a CSS issue and looking at the react-bootstrap page it looks like you should be using a FormControl for the Select:

  <FormControl componentClass="select" placeholder="select">
    <option value="select">select</option>
    <option value="other">...</option>
  </FormControl>

Also, using col classNames only work if the parent class a className="row"

Nambi N Rajan · Answer 2 · 2016-11-29T10:07:07.840

1

add one more class beside your class="form-control select" class in select field

<style>
.select{
width:200px;
height:35px;
}

put !important if needed. done. form control class of bootstrap has border radius and all if u don"t need that like all other add this line too

edited Nov 29 '16 at 10:07

answered Nov 25 '16 at 05:21

Nambi N Rajan

491
5
15

Select statements width sizes not working properly?

2 Answers2