Hide bars

[Gabriel]

Similar to this thread: http://www.kendoui.com/forums/ui/splitter/hide-the-bar.aspx

How do I hide all borders on the splitter? I've tried the above approach with no luck?

[Alex Gyoshev]

Hello Gabriel,

Do you need all of the splitbars hidden, or only the static ones? Here's a jsFiddle that shows how to hide the static splitbars. If that is not your scenario, please modify the example to describe your exact problem.

Kind regards,
Alex Gyoshev
the Telerik team

[Gabriel]

Another thing however, doing this:

.k-splitter .k-splitbar-static-vertical {

    width: 0;

    border-width: 0;

}

Does not hide the bar, rather set it to 1px...

[Dimo]

Hi,

Please inspect the splitbar with Firebug to see whether the additional styles that you have added, are applied correctly. Here is a demo that works as expected:

http://jsfiddle.net/gyoshev/Ep66V/show/

Greetings,
Dimo
the Telerik team

[Gabriel]

Okay, got it now - thanks. How do you remove the outer border all together?

[Gabriel]

I've managed to remove some of the borders by setting the border to zero for k-pane.
But there are still borders and there seems to be dozens and dozens of syles being applied.

I would like to remove ALL borders from a splitter. This includes the outer border around the splitter, all splitbars and any other border thay may be applied.

[Dimo]

Hi Gabriel,

The Splitter basically uses 2 CSS classes for applying borders and backgrounds:

k-splitter
k-splitbar

There are others as well, but they are not important, as they only add some flavor to the styling.

So you simply need to enforce a zero border width to the above classes, and zero width/height to the splitbars, as they also have a background color.

div.k-splitter,
.k-splitter .k-splitbar {
    border-width: 0;
}

.k-splitter .k-splitbar {
    width: 0;
    height: 0;
}

Note that the above CSS selectors use some additional elements (e.g. div) to increase their specificity and override successfully the theme styles.

Greetings,
Dimo
the Telerik team