Как сделать React-Semantic-UI вертикально, как на мобильном?

Question

У меня есть стекируемое меню и выпадающий список на моем сайте. На мобильном телефоне все работает нормально, но когда я тестирую свой веб-сайт на ipad, раскрывающееся меню не стекируется, а часть содержимого не отображается (например, О программе)

Вот как мои сайты выглядят на каждом устройстве:

На мобильном телефоне

На Ipad

Мой код

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {menu.items.map((item) => {
                if (item.menu_item_parent === '0') {
                  const menuList = menu.items.filter(
                    i => i.menu_item_parent === item.ID.toString(),
                  );
                  if (menuList.length === 0) {
                    return (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }}
                      >
                        {item.title}
                      </Menu.Item>
                    );
                  }
                  return (
                    <Dropdown
                      floating
                      item
                      text={item.title}
                      key={item.ID}
                      style={{
                        textAlign: 'Left',
                        display: 'block',
                        fontSize: '1.5em',
                      }}
                    >
                      <Dropdown.Menu>
                        {menuList.map(i => (
                          <Dropdown.Item
                            key={i.ID}
                            href={`/${item.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}/${i.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}`}
                          >
                            {i.title}
                          </Dropdown.Item>
                        ))}
                      </Dropdown.Menu>
                    </Dropdown>
                  );
                }
                return null;
              })}
            </Menu>

Так как я могу сделать так, чтобы раскрывающийся список падал вертикально на ipad, как это видно на мобильном телефоне?

Answer 1

Согласно последней документации React Semantic UI. Он не поддерживается оболочкой реагирования для семантического интерфейса.

---

Семантическое меню стеков пользовательского интерфейса на мобильном телефоне, вам нужно изменить его, чтобы оно соответствовало вашему случаю

Вам нужно будет вручную переопределить для максимальной ширины, установленной semantic-ui-css

Текущий стиль

@media only screen and (max-width: 767px)
  .ui.stackable.menu .item {
  width: 100%!important;
}

Ваш индивидуальный стиль

@media only screen and (max-width: 800px) // or any width you want stackable menu on
  .ui.stackable.menu .item {
  width: 100%!important;
}

---

⚠️ Примечание : Вы должны включить свой файл css после импорта semantic-ui-css

import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling