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

Splitter 100% height

7 Answers 434 Views

Splitter

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

7 Answers, 1 is accepted

answered on 28 May 2015, 07:05 PM

Thanks for the Reply,

Unfortunately I am unable to get the height 100% to work with a MVC splitter. The link you show applies to a Kendo-UI splitter, not a Kendo UI MVC splitter. They are coded a bit differently. My code looks as follows:

@(Html.Kendo().Splitter()
.Name("Splitter")
.Orientation(SplitterOrientation.Vertical)
.Panes(verticalPanes =>
{
verticalPanes.Add()
.Size("62px")
.HtmlAttributes(new { id = "header-pane" })
.Resizable(false)
.Collapsible(false)
.Content(@<div class="pane-content">

//</div>);

verticalPanes.Add()
.HtmlAttributes(new { id = "content-pane" })
.Scrollable(false)
.Size("100%")
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "height: 100%;" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("160px")
.Collapsible(true)
.Content(@<div class="pane-content">
</div>);

horizontalPanes.Add()
.HtmlAttributes(new { id = "MainContent" })
.Collapsible(true)
//.Size("100%")
.LoadContentFrom(Url.Content(""));
}).ToHtmlString()
);

verticalPanes.Add()
.Size("100%")
.HtmlAttributes(new { id = "footer-pane" })
.Resizable(false)
.Collapsible(false)
.Content(@<div class="pane-content">
</div>);
})
)

answered on 20 Nov 2015, 09:58 AM

Hello Patrick,

When using the MVC Splitter, the required approach is exactly the same, as when using the HTML/JS widget. You need to apply some 100% height styles and ensure the outer Splitter has no border.

http://docs.telerik.com/kendo-ui/web/splitter/how-to/expand-splitter-to-100-height

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>100% high Kendo UI Splitter</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css" />

<style>

html,

body

{

height:100%;

margin:0;

padding:0;

overflow:hidden;

}

#vertical,

#horizontal

{

height:100%;

}

#vertical

{

border-width: 0;

}

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script></head>

<body>

@(Html.Kendo().Splitter()

.Name("vertical")

.Orientation(SplitterOrientation.Vertical)

.Panes(verticalPanes =>

{

verticalPanes.Add()

.Size("100px")

.Content("Outer splitter : top pane");

verticalPanes.Add()

.Content(

Html.Kendo().Splitter()

.Name("horizontal")

.Panes(horizontalPanes =>

{

horizontalPanes.Add()

.Size("220px")

.Content("Inner splitter :: left pane");

horizontalPanes.Add()

.Content("Inner splitter :: center pane");

horizontalPanes.Add()

.Size("220px")

.Content("Inner splitter :: right pane");

}).ToHtmlString()

);

verticalPanes.Add()

.Size("100px")

.Resizable(false)

.Collapsible(false)

.Content("Outer splitter : bottom pane (non-resizable, non-collapsible)");

})

)

</body>

</html>

Regards,
Dimo
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items