What is the best way to enable the slider within a Bootstrap collapse component?

Utilizing Bootstrap for creating collapsible elements has been my current approach. Additionally, I've integrated a range selector CDN into the mix. It's possible that some styles from the Bootstrap CSS, particularly those related to collapse elements, are causing issues in the UI.

Interestingly, when the range selector is positioned outside of the collapse element, everything appears and functions flawlessly.

<!doctype html>
<html lang="en>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289968997">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
  <title>Hello, world!</title>
</head>

<body>

  <h1>Hello, world!</h1>
  <div id="container">
    <div>
      <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
    </div>
    <div id="power-range" class="collapse" data-bs-parent="#container">

    </div>
    <range-selector min-range="0" max-range="15" inputs-for-labels />
  </div>


  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30535f425570021e091e03">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607f607e">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js"></script>
</body>

</html>

The issue arises when attempting to place the range selector inside the collapse element, resulting in the slider being pushed off-screen.

<!doctype html>
<html lang="en>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e819e80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
  <title>Hello, world!</title>
</head>

<body>

  <h1>Hello, world!</h1>
  <div id="container">
    <div>
      <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
    </div>
    <div id="power-range" class="collapse" data-bs-parent="#container">
      <range-selector min-range="0" max-range="15" inputs-for-labels />
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8884998eabd9c5d2c5d8">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5aab5ab">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js"></script>
</body>

</html>

Troubleshooting the exact root cause of this behavior has proven to be challenging.

javascripthtmljquerycss

Answer №1

Two Small Adjustments Needed

Upon page load, the range slider initializes itself and determines its size.

If you place the slider within a hidden element, such as a Bootstrap collapse, it may not calculate the size accurately, resulting in a distorted appearance.

To address this issue, there are several potential solutions. One option is to trigger the slider's reset method to ensure correct resizing. However, the easiest fix involves displaying the collapse on page load to allow the slider initialization before hiding it again, all without disrupting the user experience.

In the HTML markup, include the show invisible class:

<div id="power-range" class="collapse show invisible" data-bs-parent="#container">

Then, in a script tag at the bottom of the page (or within a DOMContentLoaded event handler), remove the show invisible class:

<script>
    document.querySelector(".show.invisible").classList.remove("show", "invisible");
</script>

Highlighted Solution

The suggested solution "fixes" the issue by interfering with the functionality of the Bootstrap collapse control, leading to visible UI glitches post-page load compared to the original code shared by OP.

Give It a Go

Execute the code snippet provided to observe how everything falls into place.

// hide the collapse after range control has initialized

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector(".show.invisible").classList.remove("show", "invisible");
});
<div id="container" class="mb-2 p-2 border">
  <div>
    <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
  </div>
  <div id="power-range" class="collapse show invisible" data-bs-parent="#container">
    <range-selector min-range="0" max-range="15" inputs-for-labels />
  </div>
</div>

 <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368776875">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051a0518">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js"></script>

Answer №2

I made a correction in the code by implementing a custom class. Although Bootstrap 5.1.0 was initially used, I updated it to version 5.1.3 which is the latest available. The code functions effectively on both versions.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b6a9b4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   
    

    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
        Link with href
      </a>
    </p>
    <div id="collapse">
      <div class="card card-body">
        <range-selector min-range="0" max-range="1000" />

      </div>
    </div>
 

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper 
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c2738273a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
    <!-- Option 2: Separate Popper and Bootstrap JS -->
  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af9f5e8ffdaa8b4abaab4a8">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c839c81">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js"></script>
     </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining jQuery with AngularJS for optimal web development outcomes?

As someone new to AngularJS, this project is challenging my knowledge of ng-repeat and controllers. Objective : My goal is to have the guitars appear when an option is selected from the drop-down menu and the button is clicked using ng-repeat. Currently, ...

javascriptjqueryangularjshtml

Triad of Dots for Vertical Presentations

In the past, I successfully added 3 vertical dots to a slideshow by using absolute positioning and moving them into place. Then, I used JavaScript to cycle through the active class during the animation. However, when resizing down to smaller screen resolut ...

javascripthtmlcss

Creating various visualizations using React

I am new to React, Highcharts, and UI development in general. My goal is to render multiple charts from an array of data. However, I'm currently facing an issue where only the last chart - based on the last data in the array - is displayed on the page ...

javascriptreactjshighcharts

What is the process for setting an object's property as a href in an AJAX call?

I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...

htmljquerycssajaxhref

Having trouble utilizing the data obtained from an API, encountering errors such as 'data is undefined' leading to nothing displaying on the screen, or 'data.map() is undefined'

I'm relatively new to working with APIs. Although I have successfully made a post, I am creating a new one to clearly outline my issue. My goal is to retrieve posts from the dummyapi. Below is the code snippet that I am using: import React from &a ...

javascriptreactjsreact-query

Fix the problem with resizing thumbnail images for proper display

https://i.sstatic.net/CfkAR.jpg I'm in the process of creating a deals page that features products from Amazon.in. My method involves visiting a deal, copying the image, and then uploading it to my server. However, I've noticed that when I resiz ...

htmlcssimagethumbnails

Retrieve calling image from array on rollover

Currently working on a website where I want to incorporate multiple rollovers using the same base image (distributed black pixels all over the page to create a popup effect). I decided that the best way to approach this is to use an array with all the ro ...

javascriptarraysimagerolloverrollovers

Retrieve the value of the option that has been selected

I've been searching tirelessly, but I just can't seem to find the answer online or figure out the correct code on my own. Although I did manage to make it work with jQuery, I need to switch over to using YUI 2.7. So, what exactly am I trying to ...

jqueryformsyui

Ways to modify the color of the legend text in a HighChart graph

Click here https://i.sstatic.net/iuPs4.png I am attempting to modify the color of the series legend text from black to any color other than black: $(function () { $('#container').highcharts({ legend: { color: '#FF0000', ...

javascriptchartshighcharts

Ajax is malfunctioning and defaults to the initial method and action

I am facing an issue with ajax not working for a form, except for one form that works perfectly with AJAX. I have tried various solutions such as changing input to button and altering the type from "submit" to "button", experimenting with different jQuery ...

jqueryajaxform-submit

Create a new array containing two objects that have values taken from two separate objects with the same key in Javascript

I've been attempting to achieve something I've been wanting to do: I have two objects with the same keyName but different values. I need to create a new array that contains a new object with two entries, each holding the values from the two obje ...

javascriptreactjsobject

Animating colors with jQuery and shifting SVG shapes to create dynamic and

I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...

javascriptjquerycssanimationsvg

The response from admin-ajax.php is showing as 0

I'm currently in the process of developing a contact form for WordPress, designed as a plugin. My goal is for the form to send an email upon submission without causing the page to reload. The issue arises when the submit button is clicked and e.preven ...

phpjqueryajaxwordpress

Unable to show <LI> elements

I'm having trouble adding LI items to the #historial <UL> tag. Whenever the for loop is inside the function, the list displays with some elements duplicated. I believe the for loop should remain outside of the function. Could someone please he ...

javascripthtmldom

JQuery's not operator is failing to successfully hide a div

Recently I have started learning jQuery. My goal is to hide the div with the id getLocation when another element is clicked. However, my current approach does not seem to be working as expected. $(:not("#getLocation")).click(function(){ if($("#getLoca ...

phpjquery

Discover the method for extracting the complete URL value individually using jQuery

My system involves a user clicking on a link that contains two separate IDs from the database, separated by a forward slash (/). I want to create a variable in jQuery that allows me to access both IDs. Currently, I can easily access the first ID using the ...

jqueryajax

Utilizing Selenium chromedriver to extract the latest dropdown table <tbody> information from a webpage and save it into a CSV file

Here is the table structure for a web URL: <body> <div class="marketData-inputSelect"> <select class="js-select js-optionsDataFilter"> <option value="total_volume">Total Options& ...

c#htmlseleniumselenium-webdriverfilestream

Compass in Three.js that responds to the rotation of the camera

I have been inspired to create a compass similar to the one featured on Facebook. Take a look at the image here. I have the x, y, and z rotations of the camera and I want to use them to rotate the FOV (the central slice of the compass) in a 2D circle view ...

javascript3dthree.js

Having trouble loading HTML content from another file

Here is the code snippet in question: <script> var load = function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="/linker/templates/button.html" ></object>'; } </script> ...

javascriptjqueryajaxnode.jssails.js

Identifying button clicks using selenium-wire in Python

Is there a way to use selenium-wire in python to capture a full screenshot of a web page and save it as a png file after clicking the submit button? Despite seeing a popup message saying "taking screenshot!!", the actual screenshot file is not being saved ...

javascriptpython-3.xselenium-webdriver