CSS Выпадающий список не отображается внутри div - PullRequest
Новая
       7

CSS Выпадающий список не отображается внутри div

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

Я сейчас работаю с реагировать, у меня есть выпадающий компонент, который я использую отсюда https://f36.contentful.com/components/dropdown/

function DropdownExample() {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <Dropdown
      isOpen={isOpen}
      onClose={() => setOpen(false)}
      key={Date.now()} // Force Reinit
      toggleElement={
        <Button
          size="small"
          buttonType="muted"
          indicateDropdown
          onClick={() => setOpen(!isOpen)}
        >
          Trigger Dropdown
        </Button>
      }
    >
      <DropdownList>
        <DropdownListItem>
          Dropdown list item 1
        </DropdownListItem>
        <DropdownListItem>
          Dropdown list item 2
        </DropdownListItem>
      </DropdownList>
    </Dropdown>
  );
}

Он используется здесь 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    return (
        <div style = {diveStyle}>
          <DropdownExample /> 
        </div>
    );
  }
}

Мой DropDownItem практически не отображается в браузере, когда щелкают раскрывающиеся элементы, но они не видны на экране: слегка подсвеченная строка - это элемент раскрывающегося меню над выбранным, другое содержимое перекрывает его. В браузере это выглядит так: enter image description here

Также мой раскрывающийся список не отображается должным образом, элемент dropdownItem находится над DropDown, вместо этого он должен выдаваться, а не подниматься.

В чем может быть проблема?

...