Tabs插件中使用UEditor全屏时会显示异常 #901

Closed
sun-ao opened this Issue Jul 25, 2016 · 1 comment

Projects

None yet

2 participants

@sun-ao
sun-ao commented Jul 25, 2016

问题描述

选项卡(Tabs)中使用UEditor时,如果使用UEditor的全屏会显示异常(选项卡会遮挡住UEditor插件)

产生环境

  • 设备及型号:
  • 操作系统及版本:
    OS X 10.11.4 (15E65)
  • 浏览器及版本:
    Safari版本 9.1 (11601.5.17.1)
    Chrome版本50.0.2661.102 (64-bit)
  • 演示地址:
    在线演示点击演示页面中UEditor右上角的全屏按钮
  • 问题截图/录屏:
    amazeui_tabs_ueditor

复现步奏

1.访问演示地址

2.点击UEditor右上角全名按钮
amazeui_tabs_ueditor2

3.即可看到显示异常

4.试了一下Bootstrap的选项卡没有异常 演示地址

@minwe
Contributor
minwe commented Jul 26, 2016
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Amaze UI 在线调试</title>
  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.1/css/amazeui.min.css"/>
    <script src="http://ueditor.baidu.com/ueditor/ueditor.config.js"></script>
    <script src="http://ueditor.baidu.com/ueditor/ueditor.all.js"></script>
</head>
<body>

<form action="">
  <div class="am-tabs" data-am-tabs>
  <ul class="am-tabs-nav am-nav am-nav-tabs">
    <li class="am-active"><a href="#tab1">UEditor</a></li>
    <li><a href="#tab2">等候</a></li>
    <li><a href="#tab3">流浪</a></li>
  </ul>

  <div class="am-tabs-bd am-tabs-bd-ofv">
    <div class="am-tab-panel am-fade am-in am-active" id="tab1" style="height:300px;">
            <div>
                <script id="editor" type="text/plain">
全屏会消失    
      </script>

            </div>

    </div>
    <div class="am-tab-panel am-fade" id="tab2">
      走在忠孝东路<br>徘徊在茫然中<br>在我的人生旅途<br>选择了多少错误<br>我在睡梦中惊醒<br>感叹悔言无尽<br>恨我不能说服自己<br>接受一切教训<br>让生命去等候<br>等候下一个漂流<br>让生命去等候<br>等候下一个伤口
    </div>
    <div class="am-tab-panel am-fade" id="tab3">
      我就这样告别山下的家,我实在不愿轻易让眼泪留下。我以为我并不差不会害怕,我就这样自己照顾自己长大。我不想因为现实把头低下,我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话?别让我的真心散的像沙。如果有一天我变得更复杂,还能不能唱出歌声里的那幅画?
    </div>
  </div>
</div>
</form>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.1/js/amazeui.min.js"></script>
</body>
</html>
  • <div class="am-tabs-bd am-tabs-bd-ofv">
  • 编辑器套了一个 div

跟 BootStrap 有一点差别,为了实现动画效果 .am-tabs-bd 上有 overflow: hidden 的样式,把编辑器截断了。

@sun-ao sun-ao closed this Jul 26, 2016
@minwe minwe added the js-tabs label Jul 26, 2016
@minwe minwe added this to the Coming release milestone Jul 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment