GAS 对话框中的绝对定位工具提示（表情符号选择器）？

Question

我的 GAS 脚本中有一个对话框，我想向其中添加表情符号选择器。这是我选择的选择器：https://www.npmjs.com/package/emoji-picker-element#usage 一切都很顺利，直到选择器实际呈现为止。这时我意识到绝对定位的元素仍然严格保留在对话框窗口内。因此，就目前情况而言，我唯一的选择就是进行一次真正的大型对话。或者是吗？有没有办法让元素在 GAS 对话框窗口之外渲染？

我尝试摆弄 z-index、位置等。无论如何，工具提示仍然保留在对话框内。

下面是可以重现问题的代码。

调试.js

function emojiTest() {

  const html = HtmlService.createTemplateFromFile('forms/EmojiTest');

  var htmlOutput = html.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(250)
    .setHeight(250);

  SpreadsheetApp.getUi()
    .showModalDialog(htmlOutput, 'Test Emoji'); 

}

表单/EmojiTest.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

  <style>

    /* emoji */
    .tooltip:not(.shown) {
      display: none;
    }

    .tooltip {
      position: absolute;
      top: -30px;
      right: 0;
      left: 0;
      bottom: 0;
    }

  </style>
</head>

<body>

  <form id="nameChangeForm" onsubmit="">
    <input type="text" name="cat" required id="nameField">

    <button onclick="event.preventDefault();">😏</button>
    <div class="tooltip" role="tooltip">
      <emoji-picker></emoji-picker>
    </div> 

    <div id="buttons">
      <input type="submit" value="Submit"  >
    </div>
  </form>

  <script type="module">
    import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
  import insertText from 'https://cdn.jsdelivr.net/npm/[email protected]/index.js'

  document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
    insertText(document.querySelector('input'), e.detail.unicode)
  })
  </script>

  <script type="module">
    import * as Popper from 'https://cdn.jsdelivr.net/npm/@popperjs/core@^2/dist/esm/index.js'
  const button = document.querySelector('button')
  const tooltip = document.querySelector('.tooltip')
  Popper.createPopper(button, tooltip)

  document.querySelector('button').onclick = () => {
    tooltip.classList.toggle('shown')
  }
  </script> 

</body>

</html>

Answer 1

从您的问题和回复来看，以下修改如何？

来自：

.tooltip {
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  bottom: 0;
}

还有，

<div class="tooltip" role="tooltip">
  <emoji-picker></emoji-picker>
</div>

致：

.tooltip {
  position: absolute;
  top: auto !important;
  right: 0;
  left: 0;
  bottom: 0;
  transform: none !important;
  width: 230px;
  height: 210px;
}

.emoji-picker {
  width: 100%;
  height: 100%;
}

还有，

<div class="tooltip" role="tooltip">
  <emoji-picker class="emoji-picker"></emoji-picker>
</div>

当此修改反映在您的显示脚本中时，它会变成如下所示。

如果您不想使用

width

和

height

，请删除它们。

GAS 对话框中的绝对定位工具提示（表情符号选择器）？

问题描述投票：0回答：1

1个回答

来自：

致：

最新问题

GAS 对话框中的绝对定位工具提示（表情符号选择器）？

问题描述 投票：0回答：1

1个回答

来自：

致：

最新问题

问题描述投票：0回答：1