Splitter sensitive area

[Alberto Monteverdi]

Hi,

I checked that the sensitive area of Javascript Splitter control

(the area around the split line useful for resizing the panels)

is about 8px wide (for horizontal split) by both sides of split line

(and about 8px high for vertical split).

How can I change that value ?

Thank you.

Alberto.

[Buvana Sathasivam]

Hi Alberto, 

Greetings from Syncfusion support. 

You can achieve your requirements using the separateSize property. It is used to specify the size of the separator line in both horizontal and vertical orientations. 

let splitObj1: Splitter = new Splitter({ 

  separatorSize: 10, 

}); 

Sample: https://stackblitz.com/edit/x8qmds  

API link: https://ej2.syncfusion.com/documentation/api/splitter#separatorsize  

Please let us know if you have any queries. 

Regards, 

Buvana S 

[Alberto Monteverdi]

Hi Buvana,

I know that there is the separatorSize to set, but there is more space

(space within the cursor changes its shape (it becomes 'resize') and the

user can resize the panels) around the split bar; in the example You

provided the width (for horizontal split) and the height (for vertical split)

of the split bar is 10px (separatorSize) but there are more extra-pixels

where the cursor becomes 'resize' and the same pixels become sensitive

for resize. I want the possibility to change that value.

Thank you.

Alberto.

[Alberto Monteverdi]

Hi,

I'm sorry, I know that it is an exigent request, but it is not a crazy

idea, because in my project I have many JavaScript Splitter Widgets

that generate various panels; the content of these panels may

overflow and there may be scrollbars on their sides.

The extra-pixels of the sensitive area of the split bar cover the

scrollbars, so they become inaccessible.

Sorry again for the inconvenience.

Best Regards.

Alberto.

[Buvana Sathasivam]

Hi Alberto, 

Thank you for the update. 

We analyzed your query and found the "resize cursor displayed before hovering over the separator bars." The resizable split bar's width can be adjusted as seen below. 

.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after { 

          width: 4px; 

        } 

Sample:  https://stackblitz.com/edit/x8qmds-dzbrgc-59jtar?file=index.html 

Please check the above sample to see whether your problem has been resolved, or otherwise send us a video illustration of your problem. so that we can better understand your problem and provide an update as soon as possible. 

Regards, 

Buvana S 

[Alberto Monteverdi]

Hi Buvana,

Thank you for attention. Your suggestion solved my issue.

I applied the following settings:

.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {

    width: 2px;

}

.e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar::after {

    height: 2px;

}

and separatorSize: 1px;

Thank you once again.

Alberto.

[Buvana Sathasivam]

Hi Alberto, 

We are glad that your reported issues are resolved. Please get back to us if you need any further assistance. 

Regards, 

Buvana S