Element: The [Bug Report] Select selector does not display the drop-down content and the Dialog dialog does not display the mask.

Created on 25 Sep 2018 · 11Comments · Source: ElemeFE/element

Element UI version

2.4.7

OS/Browsers version

Chrome 69

Vue version

2.5.17

Reproduction Link

https://springhgui.github.io/test.html

Steps to reproduce

见链接页面

What is Expected?

正常显示，兼容页面部分全屏化

What is actually happening?

不能正常使用控件

bug

Source

SpringHgui

Most helpful comment

这页面里是将full内的元素全屏化，mask与dropdown都是append在body的最下面，并没有包含在full内部，所以显示不出来。
最简单的解决办法是将mask或dropdown手动移到full内部

this.$nextTick(() => {
  document.querySelector('#full').appendChild(document.querySelector('.v-modal'))
})

dropdown同理

elfman on 28 Oct 2018

🚀1 🎉1 👍1

All 11 comments

Translation of this issue:

Element UI version
2.4.7

OS/Browsers version
Chrome 69

Vue version
2.5.17

Reproduction Link
https://springhgui.github.io/test.html

Steps to reproduce
See link page

What is Expected?
Normal display, compatible page part full screen.

What is actually happening?
Unable to use controls normally

element-bot on 25 Sep 2018

问题确实存在，但是原因未知。

ziyoung on 29 Sep 2018

显示不出来的元素，他们都不是全屏化的那个根元素的子元素，所以不显示。

SpringHgui on 4 Oct 2018

this.$nextTick(() => {
  document.querySelector('#full').appendChild(document.querySelector('.v-modal'))
})

dropdown同理

elfman on 28 Oct 2018

🚀1 🎉1 👍1

下面两个属性可以解决
el-dialog :modal-append-to-body="false"
el-select :popper-append-to-body="false"

awebird on 10 Dec 2018

el-cascader能否提供popper-append-to-body参数？或者提供更全局的配置，直接append在body下会有类似的问题

awebird on 10 Dec 2018

建议直接把 id="full" 加到 body 元素上。

island205 on 6 Mar 2019

这个不是坑么，怎么就直接关闭了？这里的需求很明显是想全屏某个部分啊。

lucaslz2020 on 17 Apr 2019

elfman的方法可用，我是在一个子组件使用的Tooltip，并且需要将包含这个子组件的div全屏化。

解决方法如下

在需要触发tooltip的地方加一个@mouseover事件，这个事件用emit触发父页面的append方法。

子组件：

<el-tooltip class="item" effect="dark" :content="name" placement="top">
  <div class="name" @mouseover="show()">{{ name }}</div>
</el-tooltip>

show() {
  this.$emit('showTooltip');
},



md5-93aebeea81ed42cf9758018250f9af0d



<PDFViewer
  control="height"
  :src="currentPdfUrl"
  style="height:75vh;"
  ref="pdf"
  @showTooltip="showTooltip()"
></PDFViewer>



md5-c64b4ad1426ca6b73e993ce951b4719f



showTooltip() {
  setTimeout(() => {
    console.log(this.$refs.fullScreen);
    if (document.querySelector('.el-tooltip__popper')) {
      this.$refs.fullScreen.appendChild(document.querySelector('.el-tooltip__popper'));
    }
  }, 100);
}

感谢elfman！！！

JasonLam0990 on 26 Jul 2019

很多弹出层都是添加到body上的，可以换一种思路，不直接全屏目标元素，将目标元素position为fixed，top/left设置为0，然后将body全屏，退出全屏时设置position为原定位方式
设置完后因为"从父原则"的影响，dialog的遮罩层会跑的dialog内容上面，需要增加append-to-body指令