Search code examples
reactjsjhipsterreactstrap

Popover overlaps modal in React-JHipster

I'm using ReactStrap tools to do my work but the problem is the popover that I add in a Font Awesome icon that overlaps the modal

enter image description here

enter image description here

This is my code:

<details data-popover="right">
          <summary>
            <FontAwesomeIcon
              onClick={togglePopover}
              icon={faEllipsisVertical}
              style={{ color: '#d9d9d9' }}
              type="button"
              className="componente-boton circle-icon"
              id={'elipsis-icon'}
            />
          </summary>
          <Popover
            target="elipsis-icon"
            isOpen={popoverOpen}
            placement="bottom"
            trigger="hover"
            className="notificaciones-popover mi-popover"
          >
            <div>
              <ul className="list-group mb-0">
                <li className="list-group-item">
                  <p onClick={navToPath} style={{ cursor: 'pointer' }}>
                    Editar
                  </p>
                  <p onClick={toggleModal} style={{ cursor: 'pointer' }}>
                    Eliminar
                  </p>
                  <div className="mi-pagina-modal-modal">
                    <Modal isOpen={modal} toggle={toggleModal} className="mi-pagina-modal">
                      <ModalBody className="mi-pagina-modal-body">
                        <img src="../../../../content/images/alerta.png" alt="Alerta" className="mi-pagina-modal-img" />
                        <h5 className="mi-pagina-titulo-modal">Eliminar</h5>
                        <div className="mi-pagina-modal-texto">
                          <p>¿Estas seguro de eliminar “{blog.title}”?</p>
                        </div>
                        <Button onClick={toggleModal} className="mi-pagina-btn-modal back">
                          Cancelar
                        </Button>
                        <Button onClick={onDelete} className="mi-pagina-btn-modal submit">
                          Eliminar
                        </Button>
                      </ModalBody>
                    </Modal>
                  </div>
                </li>
              </ul>
            </div>
          </Popover>
        </details>

I expected hide the popover behind the modal when is activated

Solution

  • Nevermind, I did it, this was the solution:

    <Popover target="elipsis-icon" isOpen={popoverOpen} placement="bottom" trigger="hover" className="poper">

    The classname popover I changed to 'poper' and I changed the style in CSS

    .poper {position: fixed;}

    And the popover does not overlap