Widget Visibility in Carousels and Sliders

#Intended Audience

This tutorial is for:

• Frontend developers implementing widget carousels, tabs, or sliders
• Integration engineers working with dynamic widget visibility
• Developers familiar with basic widget integration
• Those experiencing layout or sizing issues with hidden widgets

#Goals

By completing this tutorial, you will:

• Understand why display: none causes widget layout issues
• Learn two approaches to controlling widget visibility
• Implement visibility toggling while preserving space
• Implement visibility toggling without taking space
• Trigger proper resize events for layout recalculation
• Choose the right approach for your use case

#Prerequisites

Before starting this tutorial, ensure you have:

• Valid Sportradar Widget license - Contact Sales if needed
• Basic HTML/CSS knowledge - Understanding of CSS display and visibility properties
• Basic JavaScript knowledge - DOM manipulation and event handling
• Integrated widget - Working widget on your page (see Getting Started)
• Web development environment - Text editor and modern browser with DevTools

#Overview

#The Problem

When a widget is added to a page and hidden using display: none; in CSS, it creates layout issues:

• The widget cannot measure its container dimensions
• Responsive breakpoints default to the smallest screen size
• Adjacent elements may misalign due to incorrect size calculations

#The Solution

There are two approaches depending on your layout requirements:

1. Preserve Space - Use visibility: hidden to keep the widget's space in the layout
2. Collapse Space - Use display: none with resize events to reclaim space

This tutorial covers both approaches.

#Tutorial Steps

#Approach 1: Preserve Space With visibility Property

Use this approach when you want the hidden widget to maintain its space in the layout, preventing other elements from shifting.

#Step 1: Set Initial Visibility State

Add the widget container with visibility: hidden in the inline style.

<!-- Widget container with visibility control -->
<div id="widget" class="sr-widget" style="visibility: hidden"></div>

#Step 2: Initialize Widget Normally

Add the widget using standard initialization. The widget will render and measure correctly even though it's not visible.

<script>
    (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
    g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
    )})(window,document,"script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    
    SIR("addWidget", "#widget", "match.lmtPlus", {
        matchId: 'your_match_id'
    });
</script>

#Step 3: Implement Visibility Toggle

Create a toggle function that switches between visible and hidden states.

const widget = document.getElementById('widget');

// Toggle widget visibility without affecting layout
const onWidgetToggle = () => {
    widget.style.visibility = widget.style.visibility === 'hidden' ? 'visible' : 'hidden';
}

#Result

The widget toggles visibility while maintaining its space in the layout:

#Approach 2: Collapse Space With display Property

Use this approach when you want hidden widgets to collapse and allow other content to take their space.

#Step 1: Set Initial Display State

Add the widget container with display: none in the inline style.

<!-- Widget container that collapses when hidden -->
<div id="widget" class="sr-widget" style="display: none;"></div>

#Step 2: Initialize Widget Normally

Add the widget using standard initialization.

<script>
    (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
    g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
    )})(window,document,"script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    
    SIR("addWidget", "#widget", "match.lmtPlus", {
        matchId: 'your_match_id'
    });
</script>

#Step 3: Implement Display Toggle With Resize Event

Create a toggle function that changes display AND triggers a resize event.

const widget = document.getElementById('widget');

// Toggle widget display and trigger resize
const onWidgetToggle = () => {
    // First change display property
    widget.style.display = widget.style.display === 'none' ? 'block' : 'none';
    // Then trigger resize event for layout recalculation
    window.dispatchEvent(new Event('resize'));
}

#Result

The widget toggles visibility while collapsing/expanding its space:

#Complete Implementation Examples

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Visibility - Preserve Space</title>
    <style>
        .carousel {
            max-width: 800px;
            margin: 0 auto;
        }
        .sr-widget {
            border: 1px solid #ddd;
            min-height: 400px;
        }
        .controls {
            text-align: center;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div id="widget" class="sr-widget" style="visibility: hidden"></div>
        <div class="controls">
            <button onclick="onWidgetToggle()">Toggle Widget</button>
        </div>
    </div>

    <script>
        (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
        g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
        )})(window,document,"script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", {
            language: "en"
        });
        
        SIR("addWidget", "#widget", "match.lmtPlus", {
            matchId: 'your_match_id'
        });
        
        const widget = document.getElementById('widget');
        
        function onWidgetToggle() {
            widget.style.visibility = widget.style.visibility === 'hidden' ? 'visible' : 'hidden';
        }
    </script>
</body>
</html>

#Key Takeaways

#Further Reading

#Core Documentation

• Getting Started Guide - Basic widget integration
• Widget Customization - Theming and styling
• Responsive Layouts - Responsive design patterns

#Related Tutorials

• ShadowDOM Integration - Advanced DOM integration
• US Sports Integration - US-specific configurations

#Web Platform Resources

• MDN: CSS visibility - Comprehensive visibility property reference
• MDN: CSS display - Display property documentation
• MDN: resize event - Window resize event documentation