Hot to customize splitter

[Tayger]

Hello 

The KendoUI Splitter would be the perfect solution for what I want to do. I ran into the follow three style problems you may know the answer:

1. The default color of the panes is white. I need to have them transparent what is ignored by the Splitter. How can I remove the defaulted white?

2. How can I change the color of the most outer frame border? (the one surrounding both panes)

3. On hovering the splitter an arrow is coming up. This is imho missleading. The arrow has only one head, should have two since you can move the splitter in two directions. How can I change that?

Greetings

[Dimitar]

Hello Farai,

The wrapper of the Splitter widget can be easily styled with CSS. I have prepared a simple Dojo example where this is demonstrated. You will notice that I have set the background to transparent and I have also removed the box-shadow. 

Concerning your question about the splitter arrow, may I ask you to provide additional clarifications about the issue faced? I have tested this in multiple browsers and I did not manage to reproduce it. You can view this short screencast which demonstrates the behavior on my end.

Regards,
Dimitar
Progress Telerik

[Tayger]

Hi Dimitar

Thank your for your excellent answer, all good and I could take over from your example!

Concerning the icon-arrow on hovering the splitter. Your screencast shows it as I would expect it! The funny thing is I see it different on Mac (Powerbook). The way I see it you can check the attached files. The filename covers the browser (all latest version) that shows it that way. Screenshots taken from first demo in: http://demos.telerik.com/kendo-ui/splitter/index

The same behaviour on vertical splittlers (related to all browsers based on attached screenshots).

I assume the problem is only in Mac then.

Greetings

 

 

[Dimitar]

Hello Farai,

We have further investigated the issue with the icon on Mac and I can confirm that this is a bug. I have logged this issue in the official GitHub repository and you can start tracking the progress we make on it from here. 

Until the issue is resolved, you can use the following workaround which will display a bidirectional icon:

.k-splitbar-draggable-vertical {
  cursor: ns-resize;

}

Also, as a small token of gratitude for discovering this bug, I have updated your Telerik points accordingly. You can find more information in your Telerik profile.

Regards,
Dimitar
Progress Telerik

[Tayger]

Hi Dimitar

Thank you for the confirmation, the appreciated Telerik points and the workaround that I will use for the time being!