Widget Visibility in Carousels and Sliders

Widget Visibility in Carousels and Sliders | Engagement Tools | Sportradar Developer Documentation

#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

info

This tutorial applies to any widget that needs dynamic visibility control, particularly in carousels, tab interfaces, accordions, or responsive layouts.

#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:

Preserve Space - Use visibility: hidden to keep the widget's space in the layout
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.

html

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

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

html

<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)

#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:

info

When to use this approach:

Carousel/slider where all slides should maintain equal height
Tab interfaces where content area shouldn't resize
Layouts where shifting elements would be jarring

#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.

html

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

warning

Widgets initialized while display: none may not render correctly. You must trigger a resize event when making them visible.

Add the widget using standard initialization.

html

<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)

#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

#Result

The widget toggles visibility while collapsing/expanding its space:

info

When to use this approach:

Accordion interfaces where content should collapse
Mobile responsive layouts to save vertical space
Dynamic content loading where hidden items shouldn't reserve space

#Complete Implementation Examples

#Key Takeaways

Use `visibility` for Fixed Layouts

Choose visibility: hidden when your layout requires consistent spacing and you don't want elements to shift when widgets appear/disappear.

Use `display` for Dynamic Layouts

Choose display: none when you want content to collapse and allow other elements to take the space, but always trigger resize events.

Always Dispatch Resize Events

When showing widgets that were display: none, always call window.dispatchEvent(new Event('resize')) to ensure proper rendering.

#Further Reading

#Core Documentation

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

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

View Complete HTML

html

<!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>

Widget Visibility in Carousels and Sliders

#Intended Audience

#Goals

#Prerequisites

#Overview

#The Problem

#The Solution

#Tutorial Steps

#Approach 1: Preserve Space With `visibility` Property

#Step 1: Set Initial Visibility State

#Step 2: Initialize Widget Normally

#Step 3: Implement Visibility Toggle

#Result

#Approach 2: Collapse Space With `display` Property

#Step 1: Set Initial Display State

#Step 2: Initialize Widget Normally

#Step 3: Implement Display Toggle With Resize Event

#Result

#Complete Implementation Examples

#Key Takeaways

Use `visibility` for Fixed Layouts

Use `display` for Dynamic Layouts

Always Dispatch Resize Events

#Further Reading

#Core Documentation

#Web Platform Resources

Widget Visibility in Carousels and Sliders

Widget Visibility in Carousels and Sliders

#Intended Audience

#Goals

#Prerequisites

#Overview

#The Problem

#The Solution

#Tutorial Steps

#Approach 1: Preserve Space With visibility Property

#Step 1: Set Initial Visibility State

#Step 2: Initialize Widget Normally

#Step 3: Implement Visibility Toggle

#Result

#Approach 2: Collapse Space With display Property

#Step 1: Set Initial Display State

#Step 2: Initialize Widget Normally

#Step 3: Implement Display Toggle With Resize Event

#Result

#Complete Implementation Examples

#Key Takeaways

Use visibility for Fixed Layouts

Use display for Dynamic Layouts

Always Dispatch Resize Events

#Further Reading

#Core Documentation

#Related Tutorials

#Web Platform Resources

#Approach 1: Preserve Space With `visibility` Property

#Approach 2: Collapse Space With `display` Property

Use `visibility` for Fixed Layouts

Use `display` for Dynamic Layouts