Ruby Chang Posted October 18, 2023 Share Posted October 18, 2023 I created a collapsible sidebar when the mouse hover over and off. I then have a slider inside there, but the sidebar collapses when I drag on the slider cursor. Any idea what I should do to keep the sidebar open while dragging on the date range slider?I post the JavaScript and HTML codes as attachment too. Link to comment Share on other sites More sharing options...
Jose Leviaguirre Posted October 19, 2023 Share Posted October 19, 2023 Hello Ruby, I was unable to recreate the issue. I just added a calculated column and a visualization in addition to the filter. The only thing that occurs to me is that sometimes when changing a filter or control can refresh or reload the page causing the side panel to collapse. What version of Spotfire are you using? I tried on 12.5 and everything works fine. Here is the code I used <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="styelDiv"></div> <div id="fontAwesome"></div> <ul class="side-menu" style="overflow:hidden; bottom:28px;"> <li class="spotli"> <div id="accordion" class="spotli ws-menu-button" style="background:white"> <H4 style="background:white; color: #625D52"><a href="#"> <span class="fa fa-calendar-days fa-2xl" style="background:transparent; color: #625D52"></span> <span style="color: #625D52">Production Date</span> <span style="color: #625D52; float:right;">▼ </span> </a></h4> <div align=center style="background:white; color: #625D52"> <span style="color:#625D52; background:white" class="slider-sidepanel"><SpotfireControl id="f5b55d17e7014ed5a6726f9e3d26522a" /> </span> </div> <hr> <div align=center style="background:white; color: #625D52"> <span style="color:#625D52; background:white" class="slider-sidepanel">calc value:<SpotfireControl id="851ca18de462443a93b04dc0ef7d9f8d" /> </span> </div> </li> </ul> The JavaScript remains the same Link to comment Share on other sites More sharing options...
Ruby Chang Posted October 19, 2023 Author Share Posted October 19, 2023 Thanks Jose for your quick response!The problem only happens when I save the analysis in web player. Could you please try the codes again in web player? Link to comment Share on other sites More sharing options...
Solution Jose Leviaguirre Posted October 20, 2023 Solution Share Posted October 20, 2023 I see... Seems that the Spotfire filter control inside your panel is triggering the hover or mouse out event. Try adding a trigger other than the one in the panel where the Spotfire controls sit to avoid conflict. Take a look at this example to understand the concept of a trigger border, which is basically a layer under the .side-menu but a big bigger in which you tell it to collapse the menu instead of the .side-menu panel Here a modified example based on your code in which I added a #closeTrigger layer under the .side-menu: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="styelDiv"></div> <div id="fontAwesome"></div> <div id="closeTrigger"></div> <ul class="side-menu" style="overflow:hidden; bottom:28px;"> <li class="spotli"> <div id="accordion" class="spotli ws-menu-button" style="background: beige"> <h4 style="background: white; color: #625D52"> <a href="#"> <span class="fa fa-calendar-days fa-2xl" style="background: green; color: #625D52"></span> <span style="color: #625D52">Production Date</span> <span style="color: #625D52; float: right;">▼ </span> </a> </h4> <div align="center" style="background: white; color: #625D52"> <span style="color: #625D52; background: white" class="slider-sidepanel"><SpotfireControl id="a05a922bbe6849989454e80b7d843cc0" /> </span> </div> </div> </li> </ul> Link to comment Share on other sites More sharing options...
Ruby Chang Posted October 20, 2023 Author Share Posted October 20, 2023 Thanks Jose! This works perfectly, I just need to change the color of "#closeTrigger" to transparent, and everything looks good now.Thank you very much for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now