Popover скрылся под другими компонентами - PullRequest
Новая
       6

Popover скрылся под другими компонентами

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

По какой-то причине, даже если я использую z-index, всплывающее окно всегда идет за текстом второй сворачиваемой карты. Некоторые предполагают, что существует понятие, называемое «стековый контекст», но я не уверен, как его использовать или понять. Любые предложения о том, как подойти к этому, будет принята с благодарностью.

tsx: 

return (
    <div className={bem('delayInformation')}>
      <div className={bem('td', 'delayCode')}>
        {code}
        <ArrowPopover
          anchor={
            <ClickableIcon
              ariaLabel={`Delay info (${code})`}
              onClick={toggleDelayInfoArrowPopover}
            >
              <Info />
            </ClickableIcon>
          }
          open={isOpen}
          offsetX={-10}
          onOutsideAction={toggleDelayInfoArrowPopover}
        >
          <div className={bem('delayDescription')}> // this is the popOver
            <Label>{code}</Label>
            {description}
          </div>
        </ArrowPopover>
      </div>
      <div className={bem('td')}>{addMinsPostfix(time)}</div>
      <div className={bem('td')}>{owner}</div>
    </div>
  );
};

CSS: 

  &__delayInformation {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &__delayDescription {
    width: 250px;
    @include space(padding, lg);
  }

вывод: вывод

...