Currently, I am utilizing material-ui alongside react with the version "material-ui": "^0.19.2". I am facing an issue while attempting to embed a SelectField inside a table. Although the functionality is working smoothly, there are two unexpected behaviors due to the margin and/or padding applied to the select component. Firstly, the table rows now adjust their height based on the select field, causing the entire row to appear taller than needed. Secondly, the alignment of other elements within the row is thrown off.
Here is a snippet of my code:
<SelectField
value={ props.value }
hintText="Select location.."
style={ {
width: 150,
padding: 0,
margin: 0
} }
onChange={ (event, key, payload) => this.updateLocation(event, payload, props.index, props.original.something) }>
{ ::this.createMenu() }
</SelectField>
createMenu = () => {
const { locations } = this.props.list;
return locations.map((location, i) => {
return <MenuItem key={ i } value={ location } primaryText={ location } />
});
}
If only I could manage the styling around the rendered component (TextField?), I would attempt to make it fit seamlessly. However, the style prop on the SelectField seems to affect only the dropdown list.
Alternatively, I could explore using a popover for the field and implementing a custom component to attach it to - although my attempts in this direction have not been very successful so far.