Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slider bar initialisation doesn't work when not visible #2

Open
guillomovitch opened this issue Jan 18, 2023 · 0 comments
Open

Slider bar initialisation doesn't work when not visible #2

guillomovitch opened this issue Jan 18, 2023 · 0 comments

Comments

@guillomovitch
Copy link

The following test case shows the issue, with a radio slider on a hidden tab panel. A workaround is to delay slider initialisation at tab activation, but that's a bit of pain.

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/radioslider.min.css">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/jquery.radioslider.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $("#tabs").tabs();
                $("#radios").radioslider();
            });
        </script>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
            </ul>
            <div id="tabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-2">
                <div id="radios">
                    <input id="option1" name="options" type="radio" value="1">
                    <label for="option1">Nice</label>

                    <input id="option2" name="options" type="radio" value="2" checked>
                    <label for="option2">Super</label>

                    <input id="option3" name="options" type="radio" value="3">
                    <label for="option3">Extra</label>
                </div>
            </div>
        </div>
    </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@guillomovitch