How to Hide the splitbar

[Peter]

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.

[Dimitar]

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

[Peter]

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.

[CHRISTOPHER]

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?

[Dimitar]

Hello Christopher,

Target the splitter with the id as follows:

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

Regards,
Dimitar
Progress Telerik