Hot to customize splitter

5 posts, 0 answers
  1. Tayger
    Tayger avatar
    118 posts
    Member since:
    Jan 2015

    Posted 24 Jun Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 27 Jun Link to this post

    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.
  3. Tayger
    Tayger avatar
    118 posts
    Member since:
    Jan 2015

    Posted 29 Jun in reply to Dimitar Link to this post

    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

     

     

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 30 Jun Link to this post

    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.
  5. Tayger
    Tayger avatar
    118 posts
    Member since:
    Jan 2015

    Posted 30 Jun in reply to Dimitar Link to this post

    Hi Dimitar

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

Back to Top