Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Splitter 100% height

7 Answers 381 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Pakeeru
Top achievements
Rank 1
Pakeeru asked on 16 Jul 2012, 07:53 PM
Hello,

I have a splitter ASP.net MVC kendo wrapper, I am not able to set the height to 100% with 
 .HtmlAttributes(new { style = "height:100%;border:1" }) but it is not working the way it supposed to work
only 
 .HtmlAttributes(new { style = "height:850px;border:1" }) is working not the %

Can you please help me find out a better way to automatically resize the splitter panels

Thanks
Shaik

7 Answers, 1 is accepted

Sort by
0
Justin
Top achievements
Rank 1
answered on 18 May 2015, 01:27 PM
Has anyone found an answer to this question? I am having the same issue.
0
Dimo
Telerik team
answered on 21 May 2015, 12:39 PM
Hi Justin,

Please refer to the documentation.

http://docs.telerik.com/kendo-ui/web/splitter/overview#make-the-splitter-expand-to-100-height

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
0
Justin
Top achievements
Rank 1
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>);
      })
)


0
Dimo
Telerik team
answered on 02 Jun 2015, 12:19 PM
Hi Justin,

You are missing a 100% height style for the outer Splitter. Use HtmlAttributes() or external CSS rule with an ID selector to set it.

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
0
improwise
Top achievements
Rank 1
Iron
Iron
answered on 17 Nov 2015, 02:47 PM

Hi,

Could Telerik please publish a 100% (funny, eh?) complete and downloadable example of how to get a splitter to get 100% using MVC Helpers? Having a nightmare to get it to work. Thank you.

0
Dimo
Telerik team
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>
 
 
<style>
    html,
    body
    {
        height:100%;
        margin:0;
        padding:0;
        overflow:hidden;
    }
 
    #vertical,
    #horizontal
    {
        height:100%;
    }
 
    #vertical
    {
        border-width: 0;
    }
</style>
 
<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
0
Doug
Top achievements
Rank 1
Veteran
answered on 24 Jan 2016, 09:45 PM
Thanks Dimo for the great post/example.  Exactly what I was looking for and written to work as a single file example.
Tags
Splitter
Asked by
Pakeeru
Top achievements
Rank 1
Answers by
Justin
Top achievements
Rank 1
Dimo
Telerik team
improwise
Top achievements
Rank 1
Iron
Iron
Doug
Top achievements
Rank 1
Veteran
Share this question
or