This is a migrated thread and some comments may be shown as answers.

Hot to customize splitter

4 Answers 64 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 24 Jun 2017, 03:12 PM

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

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 27 Jun 2017, 08:34 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 29 Jun 2017, 09:43 PM

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

 

 

0
Dimitar
Telerik team
answered on 30 Jun 2017, 11:48 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 30 Jun 2017, 11:30 PM

Hi Dimitar

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

Tags
Splitter
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or