浏览代码

fix(popover): set display before calculating width

Popover works by first creating a DOM element with display none
then having jquery calculate its width and new position and
then setting display to table. This does not work with p2p
connection stats, which are much wider than the default width
of the popover. What will happen is when display table is set,
the width will increase greatly so the positioning will be off.
The workaround here is to set display table as the default
display but toggle visibility instead.
master
Leonard Kim 7 年前
父节点
当前提交
0d4b77d7b1
共有 2 个文件被更改,包括 6 次插入5 次删除
  1. 2
    1
      css/_jitsi_popover.scss
  2. 4
    4
      modules/UI/util/JitsiPopover.js

+ 2
- 1
css/_jitsi_popover.scss 查看文件

3
     top: 0;
3
     top: 0;
4
     left: 0;
4
     left: 0;
5
     z-index: $jitsipopoverZ;
5
     z-index: $jitsipopoverZ;
6
-    display: none;
6
+    display: table;
7
+    visibility: hidden;
7
     max-width: 300px;
8
     max-width: 300px;
8
     min-width: 100px;
9
     min-width: 100px;
9
     text-align: left;
10
     text-align: left;

+ 4
- 4
modules/UI/util/JitsiPopover.js 查看文件

36
             const { element, target } = elements;
36
             const { element, target } = elements;
37
 
37
 
38
             $('.jitsipopover').css({
38
             $('.jitsipopover').css({
39
-                display: 'table',
40
                 left: element.left,
39
                 left: element.left,
41
-                top: element.top
40
+                top: element.top,
41
+                visibility: 'visible'
42
             });
42
             });
43
 
43
 
44
             // Move additional padding to the right edge of the popover and
44
             // Move additional padding to the right edge of the popover and
72
             const $jistiPopover = $('.jitsipopover');
72
             const $jistiPopover = $('.jitsipopover');
73
 
73
 
74
             $jistiPopover.css({
74
             $jistiPopover.css({
75
-                display: 'table',
76
                 left: element.left,
75
                 left: element.left,
77
-                top: element.top
76
+                top: element.top,
77
+                visibility: 'visible'
78
             });
78
             });
79
             $jistiPopover.find('.arrow').css({ left: calcLeft });
79
             $jistiPopover.find('.arrow').css({ left: calcLeft });
80
             $jistiPopover.find('.jitsipopover__menu-padding')
80
             $jistiPopover.find('.jitsipopover__menu-padding')

正在加载...
取消
保存