Skip to content

SelectField alignment issue with inline forms #2601

@javaguy

Description

@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:

image

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions