Almost full-screen splitter

[joe castle]

Hi,

I would like the "full-screen" functionality, but my splitter has a top margin

.HtmlAttributes(new { style = "height: 100%; margin-top: 50px" })

 so the resize doesn't work correctly. Is there a way to adjust it to work correctly when the window is resized?

thanks

[Dimo]

Hello Joe,

I am afraid the MVC Splitter currently does not support such offsets. What I can suggest you is to move the 50px margin from outside the Splitter to the inside by reorganising your layout a bit (e.g. use a separate 50px-high Splitter pane on top).

Best wishes,
Dimo
the Telerik team

[joe castle]

Hi Dimo, 

I thought about your suggested solution but I could only lock the top pane but could not remove the border. Is it possible to totally remove/hide it?

Thank you

[Dimo]

Hi Joe,

Splitter panes do not have borders, only the Splitter itself and the splitbars have. You can override the Splitter's styling and remove its outer border like this:

div.t-splitter
{
       border-width: 0;
}

Best wishes,
Dimo
the Telerik team

[joe castle]

I didn't express myself correctly, I didn't know that splitbars er called slitbar :).
If I use a separate 50px-high Splitter pane on top it will have a splitbar - I would like to remove it to simulate the margin. 

So I guess the question is if a specific splitbar can be removed/hidden.

Thank you

[Dimo]

Hello Joe,

If you don't have to support IE6, then you can use:

vPanes.Add()
    .Size("50px")
    .Collapsible(false)
    .Resizable(false)
    .HtmlAttributes(new { @class = "top-pane"} )
    .Content(() =>
    {%>
        <p>this is the 50px-high top pane</p>
    <%});

.top-pane+.t-splitbar
{
    border-width: 0;
}

Otherwise you should subscribe to the Splitter's OnLoad event, find the first splitbar with jQuery or standard DOM operations, and remove its borders with an inline style or a custom CSS class.


Greetings,
Dimo
the Telerik team

[joe castle]

I appreciate your help Dimo. It works as intended now, although I went for hiding it with

.top-pane+.t-splitbar
{
    visibility:collapse;
}

Thanks again

[Dimo]

Hello Joe,

Glad you resolved it. Note that visibility:collapse is the same as visibility:hidden when used for non-table elements, as in this case.

All the best,
Dimo
the Telerik team