Hide the bar

[sitefinitysteve]

Ok, so I want my top panel to be expanded, and not allow resizing, so ideally I'd like the "bar" between the panes to be 0px in width as really it serves no purpose anymore :)

...so how can I accomplish that?  It's something that the RadControls do...is it doable by pure CSS perhaps? 

[Alex Gyoshev]

Hello Steve,

This is not supported in the current beta. However, we implemented it for the next one (and the attached file contains the updated script -- it is the same file as in your other post). With it, you can style the required splitbar to 0px through something like the following CSS:

.t-pane:first-child + .t-splitbar {
    width: 0;
    overflow: hidden;
    border-width: 0;
}

Or, if you use JavaScript to set the splitbar size, please make sure to call the splitter resize() method afterwards.

Regards,
Alex Gyoshev
the Telerik team

[sitefinitysteve]

HAHA!  Life saver thanks!

When can we expect a new release?

[sitefinitysteve]

Hmmm...what would be more handy is if you decorated the splitbars with a class I can handle when it's expanded and no resizing is available...or perhaps let me define a css class in the pane definition?...or have a new property which is hidebar:true...

I hate the idea of having a massive nested list of these...
.t-pane:first-child + .t-splitbar

[Alex Gyoshev]

Hello Steve,

Well, the CSS rule from yesterday was targeting only the first splitbar (not very useful). We don't have a specific CSS for the non-draggable splitbars, but we have for the draggable ones, so:

.t-splitter .t-splitbar {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 0;
}

.t-splitter .t-splitbar-draggable-horizontal {
    width: 5px;
    border-width: 0 1px;
    height: 100%;
}

.t-splitter .t-splitbar-draggable-vertical {
    height: 5px;
    border-width: 1px 0;
    width: 100%;
}


Regards,
Alex Gyoshev
the Telerik team

[sitefinitysteve]

...any plans for this yet by any chance?

k-splitbar-static or something? (curious if it just isnt implemented or never will be implemented)

Let me just show why this is causing issues...

http://screencast.com/t/FXSJzLetNIF8

I want to GLOBALLY say inside of this "rightPane" div...if I see a splitter whos pane isn't at all moveable, collapsible, expandable...I just want the dude hidden.

Problem is there's no classes to help me.  Like if that one at the bottom right had a t-splitbar.t-collapsable or SOMETHING that differentiated it from the one above I could style around that perhaps (does that make sense?)

[Dimo]

Hi Steve,

We have not implemented such a behavior yet, but it is reasonable, so we will think about it. In the meantime, I suggest you to try executing the following script after initializing the Splitter:

var splitterElement = $("#SplitterID");
$(".k-splitbar-horizontal", splitterElement).filter(":empty").css({ "width": "0", "border-right-width": "0"});
$(".k-splitbar-vertical", splitterElement).filter(":empty").css({ "height": "0", "border-bottom-width": "0"});
splitterElement.trigger("resize");

Alternatively, setting a 1px width / height and not removing a border will yield nice narrow (3px wide) splitbars.

Best wishes,
Dimo
the Telerik team

[Dimo]

Hi again,

The narrow "static" splitbar has been implemented for non-resizable non-collapsible panes. It will be 3px wide - two 1px borders plus 1px of empty space in between.

Regards,
Dimo
the Telerik team

[sitefinitysteve]

Oh sweet!  Thanks again guys :)

So now I assume it has a class i can hook into to make it invisible (for my purposes)?

[Dimo]

Yes, the CSS classes are

k-splitbar-static-horizontal
and
k-splitbar-static-vertical

Regards,
Dimo
the Telerik team

[sitefinitysteve]

Ah nice nice...could I bother you perhaps for the all.min.js that contains that change perhaps (or a new build?)

[Dimo]

Hello Steve,

Here it is.

Greetings,
Dimo
the Telerik team

[sitefinitysteve]

This is fantastic, thanks so much for listening!

[Lasse]

What if I want to set border for selected panes only (like top pane and bottom pane in an Outlook-ish Splitter layout)?

Why didn't you supply methods for setting splitter heights, widths etc. like normally in MVC:

horizontalPanes.Add()

    .HtmlAttributes(new { id = "left-pane" })

    .Size("200px")

    .Collapsible(true)

    .Splitter(splitter => splitter.Height(0))

    .Content(@<div>Content goes here</div>);

[Josh]

+1 for next release have MVC wrappers to hide/style a specific splitter without to do CSS gymnastics.