Semanti c UI React внутри боковой панели открывается за пределами видимости - PullRequest
Новая
       24

Semanti c UI React внутри боковой панели открывается за пределами видимости

0 голосов
/ 07 апреля 2020

Я работаю над созданием удобной для мобильных устройств боковой панели для своего веб-приложения с использованием Semanti c UI React. У меня есть выпадающее меню внутри боковой панели, которое я хотел бы открыть так же, как this . В настоящее время раскрывающийся список открывается справа, но вместо того, чтобы отображаться поверх содержимого, элементы раскрывающегося списка отображаются справа от другого содержимого боковой панели, например:

broken sidebar image

Вот код для боковой панели: 

<Sidebar
    as={Menu}
    animation='push'
    inverted
    onHide={this.handleSidebarHide}
    vertical
    visible={sidebarOpened}
    style={{"overflow": "visible"}}
>
    <Menu.Item
        onClick={this.handleToggle}
        exact
        as={NavLink}
        to="/home"
        name='home'
    />
    <ClassesDropdown />
    <Menu.Item
        onClick={this.handleToggle}
        as={NavLink}
        to="/profile"
        name='my profile'
    />
    <Menu.Item
        onClick={this.handleToggle}
        as={NavLink}
        to="/leaderboard"
        name='leaderboard'
    />
    <Menu.Item
        onClick={this.handleToggle}
        as={NavLink}
        to="/search"
        name='search'
    />
</Sidebar>

Что визуализирует компонент ClassesDropdown: 

<Dropdown item text={"Classes"} direction="down" simple>
    <Dropdown.Menu>
         <Dropdown.Item as={NavLink} exact to={`/feed/`} key={0}>
            All Classes
         </Dropdown.Item>
         <Dropdown.Item as={NavLink} exact to={`/feed/2`} key={1}>
             "AP Human Geography"
         </Dropdown.Item>
         <Dropdown.Item as={NavLink} exact to={`/feed/1`} key={2}>
             "Algebra 2/Trig C"
         </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

Как предложено в приведенной выше скрипте, я попытался добавить style={{"overflow": "visible"}}, но я получил тот же результат.

...