Splitter 100% height

8 posts, 0 answers
  1. Pakeeru
    Pakeeru avatar
    4 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    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
  2. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 18 May 2015 in reply to Pakeeru Link to this post

    Has anyone found an answer to this question? I am having the same issue.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 May 2015 Link to this post

    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
  5. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 28 May 2015 in reply to Dimo Link to this post

    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>);
          })
    )


  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Jun 2015 Link to this post

    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
  7. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 17 Nov 2015 in reply to Dimo Link to this post

    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.

  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Nov 2015 Link to this post

    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
  9. Doug
    Doug avatar
    22 posts
    Member since:
    Feb 2005

    Posted 24 Jan in reply to Dimo Link to this post

    Thanks Dimo for the great post/example.  Exactly what I was looking for and written to work as a single file example.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready