Material-ui: SelectField alignment issue with inline forms

[javaguy]

I'm trying to create an inline form and want horizontal alignment between my fields. However, without any styling the SelectField is too high:

I've tried setting the margin and padding on the field, but not luck. How do I get them aligned?

Here is the jsx i'm using

      <div style={containerStyle}>
        <AutoComplete
          floatingLabelText = "Origin"
          dataSource = {["London", "Seattle", "Bombay"]}
          style={{
            marginLeft: 10,
            martginRight: 10
          }}/>
        <AutoComplete
          floatingLabelText = "Destination"
          dataSource = {["London", "Seattle", "Bombay"]}
          style={{
            marginLeft: 10,
            martginRight: 10
          }}/>
        <SelectField
          style={{
            marginLeft: 10,
            martginRight: 10
          }}
          floatingLabelText = "Service"
          value={this.state.selectValue}
          onChange={this._handleSelectValueChange.bind(null, 'selectValue')}
          valueMember="id"
          displayMember="name"
          menuItems={[
            {id:"1", name:"Regular"},
            {id:"2", name:"Express"}]} />
      </div>

[oliviertassinari]

We have changed the style of the SelectField lately, could you try with the master branch?

[javaguy]

Thanks @oliviertassinari for the quick response. I tried the same code with the master build but no change.

[brundonsmith]

@javaguy I found the fix for this. Setting vertical-align to bottom on the SelectField should do the trick

This should be added to the appropriate place in the codebase by someone who works on the project, as it's a common problem people would run into

[tintin1343]

@javaguy : were you able to get this resolved either by the above suggestion or your own work around or by using the latest build? let us know if you still need any help with this.

[tintin1343]

This is no longer a problem. I tried to reproduce it on the docs website and it looks to be fine. just a display: 'inline-block' on the containing div worked for me.

Closing this issue for now. If you still feel that you need help with this, feel free to comment below.

[FabFlying]

Hi, this is still an issue where both text and select controls are in a line.
Setting verticalAlign: 'bottom' on the select control resolves.

[OZhurbenko]

... this is still an issue. verticalAlign: 'bottom' on SelectField fixes it, but it would be great to have it fixed in the master.
@tintin1343

[jasonwcfan]

fyi, I opened a new issue referencing this at #6470 with another workaround that works with flexbox

[JarLowrey]

It looks like all you'd need to do is add verticalAlign:'bottom' to the root className right here, and it would be fixed when displayed here. Is that correct? Should I make a quick PR for this? Just ran into this issue myself.

[oliviertassinari]

@JarLowrey Do you have a reproduction with the latest version? This issue is quite old, better opening a new one.

[RyanZhu1024]

I was also having a similar issue with combine select and textfield. Select will go up a little bit but I didn't resolve it by setting the verticalAlign:'bottom', rather I found out from the compiled html output that the TextField has a FormControl inside while Select doesn't. If I wrap the Select in a FormControl, it resolves.

Below is the output for a TextField. For Select, I didn't see the root FormControl.

<div class="MuiFormControl-root-203 MuiFormControl-fullWidth-206 FormTextInputComponent-margin-201">
  <label class="MuiFormLabel-root-212 MuiInputLabel-root-207 MuiInputLabel-formControl-208 MuiInputLabel-animated-211 MuiInputLabel-shrink-210"
    data-shrink="true">Column name</label>
  <div class="MuiInput-root-217 MuiInput-fullWidth-224 MuiInput-formControl-218 MuiInput-underline-221">
    <div class="MuiInputAdornment-root-230 MuiInputAdornment-positionStart-231">
      <p class="MuiTypography-root-175 MuiTypography-body1-184 MuiTypography-colorTextSecondary-197"></p>
    </div>
    <input aria-invalid="false" aria-required="false" class="MuiInput-input-225" type="text" value="">
  </div>
</div>

However, initially, I wrap both TextField and Select in a FormControl, which cause the vertical alignment issue.

Just want to ask is it a design decision to wrap TextField in a FormControl while Select doesn't?

[helmassi]

@tintin1343 did you read the issue ?