Split bar handle disappears after hiding middle panel

[Laurin S]

Hi,

I have a Splitter that organizes three sub-panels. However, when I collapse (hide) the middle panel, the split bar handle for the third panel disappears and I cannot resize anymore the two remaining panels.

I've attached a demo code that shows the problem.

In addition, I would like to ask, if it is possible to hide the split bar for the second panel, when the second panel is currently not visible. Since I want to collapse/expand the panels with external buttons and therefore the split bars are only used for resizing... Therefore, it would be nice, if all split bars of "hidden" panels are 

Attachment: reactppyws2_8601c2f0.zip

[Vinitha Jeyakumar]

Hi Laurin, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your queries, 

 

Query 1. “However, when I collapse (hide) the middle panel, the split bar handle for the third panel disappears and I cannot resize anymore the two remaining panels” 

 

When we using three splitter panes and hiding the middle one will leave the other 2 panes to be un resizable and this is the behavior of the Splitter control. 

 

Query 2. “if it is possible to hide the split bar for the second panel, when the second panel is currently not visible” 

 

Your requirement to hide the splitter pane bar when it is in hidden state can be achieved by making the splitter bar’s visibility as hidden using the beforeCollapse and beforeExpand events of Splitter. Please check the code below, 

 

Code snippet: 

const beforeCollapse = (e) => 

    { 

        document.getElementsByClassName( 

          'e-split-bar e-split-bar-vertical e-last-bar' 

        )[0].style.visibility = 'hidden'; 

    }; 

    const beforeExpand = (e) => 

    { 

        document.getElementsByClassName( 

          'e-split-bar e-split-bar-vertical e-last-bar' 

        )[0].style.visibility = ''; 

    }; 

return ( 

<div className = "control-section splitter-expand" > 

  < ButtonComponent onClick={() => setShow1((s) => !s)}> 

    Hide Center Panel 

  </ButtonComponent> 

  < SplitterComponent 

    orientation = "Vertical" 

    beforeCollapse ={ () => beforeCollapse(this)} 

beforeExpand ={ () => beforeExpand(this)} 

  > 

    < PanesDirective > 

      < PaneDirective 

        size = "50%" 

        content ={ rightPaneContent1} 

      /> 

      < PaneDirective 

        collapsed ={ !show1} 

content ={ rightPaneContent2} 

      /> 

      < PaneDirective 

        collapsed ={ !show2} 

content ={ rightPaneContent3} 

      /> 

    </ PanesDirective > 

  </ SplitterComponent > 

</ div > 

); 

}; 

 

Sample: https://stackblitz.com/edit/react-mnpfrg?file=index.js 

 

API Link: https://ej2.syncfusion.com/react/documentation/api/splitter/#beforecollapse 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha