The side bar collapses when dragging on the slider

[Ruby Chang]

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.

[Jose Leviaguirre]

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;">▼&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </a></h4>
 
      <div align=center style="background:white; color: #625D52">
        <span style="color:#625D52; background:white" class="slider-sidepanel"><SpotfireControl id="f5b55d17e7014ed5a6726f9e3d26522a" />&nbsp;&nbsp;&nbsp;&nbsp;</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" />&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
 
 
 
 
  </li>
</ul>

The JavaScript remains the same 

[Ruby Chang]

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?

[Jose Leviaguirre]

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;">▼&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </a>
      </h4>
 
      <div align="center" style="background: white; color: #625D52">
        <span style="color: #625D52; background: white" class="slider-sidepanel"><SpotfireControl id="a05a922bbe6849989454e80b7d843cc0" />&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
    </div>
  </li>
</ul>

 

[Ruby Chang]

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!