haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Leonard Kim 2017-07-04 11:44:51 -07:00 committed by yanas
parent ae67b2b28e
commit 0d4b77d7b1
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/_jitsi_popover.scss
View File

@ -3,7 +3,8 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: $jitsipopoverZ; z-index: $jitsipopoverZ;
display: none; display: table;
visibility: hidden;
max-width: 300px; max-width: 300px;
min-width: 100px; min-width: 100px;
text-align: left; text-align: left;

8
modules/UI/util/JitsiPopover.js
View File

@ -36,9 +36,9 @@ const positionConfigurations = {
const { element, target } = elements; const { element, target } = elements;
$('.jitsipopover').css({ $('.jitsipopover').css({
display: 'table',
left: element.left, left: element.left,
top: element.top top: element.top,
visibility: 'visible'
}); });
// Move additional padding to the right edge of the popover and // Move additional padding to the right edge of the popover and
@ -72,9 +72,9 @@ const positionConfigurations = {
const $jistiPopover = $('.jitsipopover'); const $jistiPopover = $('.jitsipopover');
$jistiPopover.css({ $jistiPopover.css({
display: 'table',
left: element.left, left: element.left,
top: element.top top: element.top,
visibility: 'visible'
}); });
$jistiPopover.find('.arrow').css({ left: calcLeft }); $jistiPopover.find('.arrow').css({ left: calcLeft });
$jistiPopover.find('.jitsipopover__menu-padding') $jistiPopover.find('.jitsipopover__menu-padding')