[SelectField] label is influenced by text-align css property

[PhilipGarnero]

Problem description

When a SelectField component is inside another component having the css property text-align set, the label is also affected.

Steps to reproduce

Go to the select field demo page and put a text-align: center or right on any parent container (the "simple examples" for instance or the whole page). Then try this on the text field page. You'll see that you don't get the same behavior.

Versions

• Material-UI: 0.15.2
• React: 15.2.1
• Browser: Chrome 51.0.2704.106

[mjsevilla]

Has this been fixed yet? I am experiencing this issue as well..A semi-workaround is making a CSS rule specific for that SelectField with text-align: left. This will fix the selected text, just not the floating label.

[MikeMuxika]

@mjsevilla Not sure if you've solved this for yourself but if you override the position: absolute, you could get the customization you need. But a better option would be to add text-align: left to the container element housing your select field.

[gregStevenard]

For anyone looking to achieve this in latest version of material ui, it can be done through overriding the input through the theme :

const theme = createMuiTheme({
  overrides: {
        MuiSelect:{
            root:{
                textAlign:'left'
            }
        }
   }
});