Почему моя область нажатия кнопки не отображается на контейнере Electron? - PullRequest
0 голосов
/ 01 ноября 2018

Я делаю некоторые стили CSS в React / Electron.

У меня есть баннер с тостами, который падает сверху вниз. Это position: absolute. Соседний компонент - кнопка, также position: absolute.

Независимо от того, какие top или padding значения, которые я даю кнопке, ее кликабельная область равна всегда уничтожена, указатель исчезает примерно на полпути вниз.

Mac - по-прежнему можно нажимать, хотя указатель / курсор исчезает на полпути вверх. Здесь вы можете увидеть тост div (черный) под панелью инструментов .draggable (зеленый). Тогда кнопка сверху их обоих. Это должно быть кликабельным поверх тех. И это - это меняет цвет, если я наведусь и станет прозрачным.

enter image description here

Win - кликабельно только в нижней половине кнопки. И эффект наведения происходит только для нижней его половины.

Я пробовал много разных подходов (z-index'ing, добавление цветов фона, чтобы убедиться, что он не перекрывается чем-то другим, увеличение заполнения и т. Д.) *

Что я здесь не вижу? Есть ли что-то еще, что нужно отключить в Electron, настройке панели инструментов Windows?

Вот мой код:

function CustomMessageNotification({ content, dismiss }) {
  return (
    <div>
      <div className={sharedStyles.toast}>
        <div className={sharedStyles.toastMessageContainer}>
          <div className={sharedStyles.toastMessage}>
            {checkFori18nSupport(content)}
          </div>
        </div>

      </div>

here is the button that needs to be totally clickable
      <Button
        id="dismissButton"
        className={sharedStyles.actionButton}
        onClick={dismiss}
      >
        <FormattedMessage {...sharedMessages.dismiss} />
      </Button>
    </div>
  );
}

CSS:

.toast {
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  display: inline-flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px;
  width: calc(100% - 208px);
}

.actionButton {
  display: inline-block;
  z-index: 1000;
  margin-right: 10px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px 20px;
  cursor: pointer;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...