Horizontal alignment of elements - Semantic-UI-react

Question

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.sstatic.net/NxSQA.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>

Dor Shinar · Accepted Answer · 2019-01-19 09:57:01Z

1

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.

answered Jan 19, 2019 at 9:57

Dor Shinar

1,5222 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

grenzbotin · Accepted Answer · 2019-01-19 12:04:18Z

0

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)

edited Jan 19, 2019 at 12:04

answered Jan 19, 2019 at 10:47

grenzbotin

2,5651 gold badge14 silver badges14 bronze badges

3 Comments

Thjen Over a year ago

This solution does not fix the issue. However it's makes it clearer from your example, what the issue I'm trying to fix is. i.imgur.com/uN253J6.png The Radio should be aligned horizontally to the center of the input box.

grenzbotin Over a year ago

Got it. Updated my answer. Unfortunately, I did not find a way without adding an additional class, since Semantic components are coming with default values - in this case for margin..

Thjen Over a year ago

I found out, that if you wrap all form elements in a Form.Group, and tag it with the "inline" tag. You get the same result without adding custom CSS. codesandbox.io/s/88v6zl66q8

Collectives™ on Stack Overflow

Horizontal alignment of elements - Semantic-UI-react

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related