Как остановить изменение положения раскрывающегося меню bootstraps (reactstrap) при изменении размеров экрана? - PullRequest
Новая
       89

Как остановить изменение положения раскрывающегося меню bootstraps (reactstrap) при изменении размеров экрана?

1 голос
/ 19 июня 2020

В портретном режиме достаточно места для отображения раскрывающегося меню под кнопкой, которую вы нажимаете, чтобы отобразить меню:

Drop down menu in correct position

Но если размер экрана становится небольшим (альбомный на некоторых мобильных устройствах), позиция меню перемещается вверх и закрывает значок:

Drop down menu covering button

Это означает, что может быть сложно закрыть меню, не выходя из ландшафтного режима.

Я использую тот же пример, что и ReactStrap, это их документация здесь : 

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

const Example = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
        </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Foo Action</DropdownItem>
        <DropdownItem>Bar Action</DropdownItem>
        <DropdownItem>Quo Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

export default Example;

Я хочу чтобы найти способ остановить перемещение раскрывающегося меню на экранах, у которых нет высоты для полного меню.

1 Ответ

0 голосов
/ 19 июня 2020

Я нашел ответ, который искал, прочитав код.

Добавление nav и inNavBar к <Dropdown> и добавление nav к <DropdownToggle>, похоже, помогло.

Вот PR, который ввел значение: https://github.com/reactstrap/reactstrap/pull/692/files

...