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

How to Hide the splitbar

4 Answers 91 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 24 Jan 2019, 05:05 AM

I cannot figure out how to hide the splitbar - even if I delete the HTML element, it still shows because of other widths and offsets.

I have googled this for ages and found a few old suggestions (even by kendo people) that don't work anymore.

Could you point out the CSS required to simply hide the splitbar - either by transparency or even setting it to my own color - no matter much I played with the CSS, I could not work this out.

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Jan 2019, 01:27 PM
Hello Peter,

1) In case you would like to just hide the splitbars, you should be able to do so with the following selector:
<style>
  .k-splitter .k-splitbar {    
    visibility: hidden;
  }
</style>

The above is demonstrated in the following Dojo example.

2) In case you would also like to remove the space that the splitbars take, this could be achieved by also setting the width, height, and border-width as follows:
<style>
  .k-splitter .k-splitbar {    
    visibility: hidden;
    width: 0;
    height: 0;
    border-width: 0;
  }
</style>

The above is demonstrated in the following Dojo example.

I hope this resolves the issue. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 26 Jan 2019, 10:46 PM

Thanks Dimitar,

At first, this still didn't work. 

Until I realized that my CSS is being added at a later time, so when the browser gets a "resize" event this immediately works.

0
CHRISTOPHER
Top achievements
Rank 1
answered on 25 Sep 2019, 03:50 PM
If I had a kendoSplitter with an id of "pageSplitter", what would be the css syntax for only applying the splitter bar hiding techniques only to this specific control?
0
Dimitar
Telerik team
answered on 26 Sep 2019, 07:15 AM

Hello Christopher,

Target the splitter with the id as follows:

<style> 
    #pageSplitter .k-splitbar {     
        visibility: hidden;
    }
</style>

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Splitter
Asked by
Peter
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Peter
Top achievements
Rank 1
CHRISTOPHER
Top achievements
Rank 1
Share this question
or