Horizontal alignment of elements - Semantic-UI-react

1
votes

Solution: Add "inline" to Form.Group. Codepen: https://codesandbox.io/s/88v6zl66q8

I'm setting up a selection form group in semantic UI in react. However the alignment is off horizontally, so the Radio selection items are floating above an input field (see attached picture).

How do I align them? I would prefer a Semantic-UI way of doing it, and not writing custom CSS (but I'm open to suggestions). Thanks!

https://i.imgur.com/IW1imch.png

When putting the elements in a Grid or Menu container, it doesn't solve the issue.

<Form.Group>
                <Form.Field>
                    <Radio />
                <Divider vertical hidden />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Input/>
                </Form.Field>
            </Form.Group>
2
reactjssemantic-uisemantic-ui-react

2 Answers

1
votes

I think the easiest way would be to put them in a display: flex container, and set align-items: center on it, as explained here.

0
votes

Not quite sure, whether I got what you mean. But to prevent the radio buttons floating above the input field, you could arrange them via Semantics grid system:

<Form>
  <Grid>
    <Grid.Column width={8} stretched verticalAlign="middle">
      <Form.Group inline className="no-margin">
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
       </Form.Group>
    </Grid.Column>
    <Grid.Column width={8}>
      <Form.Field>
        <Input
          label="Anden værdi"
          name="n"
          type='text'
          labelPosition='right'
        />
      </Form.Field>
    </Grid.Column>
  </Grid>
</Form>

So, you can achieve a vertical align with verticalAlign="middle". The problem is, that per default Semantic` fields have a margin. We can overcome this only via adding a class and writing one argument additional css:

.no-margin {
  margin: 0 !important;
}

(See codepen: https://codesandbox.io/s/m3y9zpw358)