diff --git a/modules/src/xibo-player.js b/modules/src/xibo-player.js index 1c854a9b45..be675a7d68 100644 --- a/modules/src/xibo-player.js +++ b/modules/src/xibo-player.js @@ -1370,12 +1370,28 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) { if (isGroup) { // Grouped elements if (elemObj.items.length > 0) { + // Check if group element exists + // If not, then create + let $groupContent; + if ($content.find(`.${itemKey}`).length === 0) { + $groupContent = $(`
`); + + $groupContent.css({ + width: elemObj.width, + height: elemObj.height, + position: 'absolute', + top: elemObj.top, + left: elemObj.left, + zIndex: elemObj.layer, + }); + } + // Loop through group items elemObj.items.forEach(function(groupItem) { // Load element functions self.loadElementFunctions(groupItem, {}); - (groupItem.hbs) && $content.append( + (groupItem.hbs) ($groupContent) && $groupContent.append( PlayerHelper.renderElement( groupItem.hbs, groupItem.templateData, @@ -1398,6 +1414,12 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) { meta, ); }); + + // If there's a group content element + // Append it to the page + if ($groupContent) { + $content.append($groupContent); + } } } else { // Single elements diff --git a/ui/src/helpers/player-helper.js b/ui/src/helpers/player-helper.js index 0049b8069b..0ce90f112c 100644 --- a/ui/src/helpers/player-helper.js +++ b/ui/src/helpers/player-helper.js @@ -133,7 +133,10 @@ const PlayerHelper = function() { const hbsTemplate = hbs(Object.assign(props, globalOptions)); let topPos = props.top; let leftPos = props.left; + const hasGroup = Boolean(props.groupId); + const hasGroupProps = Boolean(props.groupProperties); + // @NOTE: I think this is deprecated but needs more checking if (props.group) { if (props.group.isMarquee) { topPos = (props.top - props.group.top); @@ -165,6 +168,14 @@ const PlayerHelper = function() { left: props.left, zIndex: props.layer, }; + + if (hasGroup && hasGroupProps) { + cssStyles.top = (props.top >= props.groupProperties.top) ? + (props.top - props.groupProperties.top) : 0; + cssStyles.left = (props.left >= props.groupProperties.left) ? + (props.left - props.groupProperties.left) : 0; + cssStyles.zIndex = 'none'; + } } if (!props.isGroup && props.dataOverride === 'text' &&