Горизонтальное выравнивание элементов - Semantic-UI-react

Решение: добавьте строку "inline" в Form.Group. Codepen: https://codesandbox.io/s/88v6zl66q8

Я настраиваю группу формы выбора в семантическом пользовательском интерфейсе в React. Однако выравнивание не по горизонтали, поэтому элементы выбора Radio плавают над полем ввода (см. Прикрепленное изображение).

Как их выровнять? Я бы предпочел сделать это с помощью семантического пользовательского интерфейса, а не писать собственный CSS (но я открыт для предложений). Спасибо!

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

Помещение элементов в контейнер Grid или Menu не решает проблему.

<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>

reactjs semantic-ui-react semantic-ui
person Thomas Jensen    schedule 19.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Не совсем уверен, понял ли я, что вы имеете в виду. Но чтобы переключатели не плавали над полем ввода, вы можете расположить их через сеточную систему Semantics:

<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>

Таким образом, вы можете добиться вертикального выравнивания с помощью verticalAlign="middle". Проблема в том, что по умолчанию поля Semantic` имеют запас. Мы можем преодолеть это, только добавив класс и написав еще один аргумент css:

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

(См. Код: https://codesandbox.io/s/m3y9zpw358)

person grenzbotin    schedule 19.01.2019
comment
Это решение не устраняет проблему. Однако из вашего примера становится понятнее, в чем проблема, которую я пытаюсь исправить. i.imgur.com/uN253J6.png Радио должно быть выровнено горизонтально по центру поле ввода. - person Thomas Jensen; 19.01.2019
comment
Понятно. Обновил свой ответ. К сожалению, я не нашел способа без добавления дополнительного класса, поскольку семантические компоненты идут со значениями по умолчанию - в данном случае для поля. - person grenzbotin; 19.01.2019
comment
Я выяснил, что если обернуть все элементы формы в Form.Group и пометить его встроенным тегом. Вы получите тот же результат, не добавляя собственный CSS. codeandbox.io/s/88v6zl66q8 - person Thomas Jensen; 19.01.2019

arrow_upward
1
arrow_downward

Я думаю, что самый простой способ - поместить их в контейнер display: flex и установить на нем align-items: center, как объясняется в здесь.

person Dor Shinar    schedule 19.01.2019