I am having such code written in semantic-ui-react:
import styled from 'styled-components'
import { Grid } from 'semantic-ui-react'
const StyledMultiselect = styled(Multiselect)`
width: 20em !important;
`
<Grid>
<Grid.Row>
<Grid.Column width={6}>
<InlineHeader content="Add Project:" />
<StyledMultiselect
placeholder="Select project"
onChange={(v) => addElement(processAddedElement ? processAddedElement({ key: v }) : v)}
options={projectNames}
inline
/>
</Grid.Column>
<Grid.Column width={6}>
<InlineHeader content="Add Project Group:"/>
<StyledMultiselect
placeholder="Select project group"
onChange={(v) => addProjectGroup(v, addElement)}
options={projectGroupNames}
inline
/>
</Grid.Column>
</Grid.Row>
</Grid>
Where InlineHeader is:
export const InlineHeader = styled(({ marginTop, ...props }) => <Header {...props} />)`
display: inline-block;
margin-right: 1em !important;
margin-top: ${props => props.marginTop || "0em"} !important;
margin-bottom: 0 !important;
.sub.header {
display: inline-block !important;
margin-left: 0.5em !important;
}
What I see is the following:
And I want header and select field to be aligned vertically. I am able to place InlineHeader and StyledMultiselect in different Grid.Column and align them using marginTop property, but then the behavior for screen resizing is much worse and they are horizontally spaced too far. If they are in one Grid.Column, then marginTop applied to InlineHeader does not work. I tried putting InlineHeader in span and applying styles but that fails to work either. Applying marginTop or paddingTop to StyledMultiselect does not work. Any ideas on how to vertically align them in a single Grid.Column?
Update
What I noticed is that the positioning is correct until I add multiple on the semantic-ui-react Form.Dropdown (StyledMultiselect), so the following is positioned correctly vertically:
<Form.Dropdown
placeholder="Select project"
inline
selection
/>
But if we add multiple it slides down in its vertical position (see screenshot above):
<Form.Dropdown
placeholder="Select project"
inline
selection
multiple
/>

