We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Splitter setting full page height

Splitter setting full page height

I'm using the splitter function and the parts which make up the splitter use the full width of the screen.
However, I can't seem to setup the splitter to use the full height of the screen .

@{Html.EJ().Splitter("outterSplitter").PaneProperties(p =>

{

p.Add().ContentTemplate(

@<div class="cont">

@Html.EJ().TreeView("tree").TreeViewFields(s => s.Datasource((IEnumerable<GMSWeb.Models.ServiceModels.navMain>)ViewBag.TreeItems).Id("ID").ParentId("ParentID").Text("NodeName").HasChild("Haschild").Expanded("Expanded"))

</div>).PaneSize("200");

p.Add().ContentTemplate(

@<div class="cont">

@RenderSection("featured", required: false)

@RenderBody()

</div>).PaneSize("200");

}).Height("400px").Width("100%").Render();

}


I assumed that the last Height property sets the overall height.  Increasing it to 650px does use the full screen but setting it to 100% like the Width property breaks the control.


How can I set the height to use the full screen just like the width property does ?


5 Replies
FP Francis Paul Antony Raj Syncfusion Team February 15, 2016 01:43 PM UTC

Hi Josef,


Thanks for contacting Syncfusion support.


We have analyzed your query and we are unable to reproduce the reported issue. The “height” of the component sets based on the parent element height if the control height value mentioned in percentage properly. Please refer the following code snippet.

@{Html.EJ().Splitter("outterSplitter").PaneProperties(p =>

{


    p.Add().ContentTemplate(


        @<div class="cont"> ...


        </div>).PaneSize("200");


    p.Add().ContentTemplate(


        @<div class="cont"> ...


        </div>).PaneSize("200");


}).Height("100%").Width("100%").Render();


}


<style>

    html, body

    {

        height: 100%;

    }     

</style>




In this, we have set “height” as 100% to the splitter control and to the parent elements body, html to make the splitter fit to the document.

Please check with the given code and provide more information if you are still facing issue or we misunderstood your query. This will help us to provide a better solution.


Regards,

Francis Paul A


JS Josef Szeliga February 16, 2016 12:29 AM UTC

My apologies. I should have sent you the entire page.
I already had that style mark-up you suggested.
here is my full page.  The error is still there when I set height in percentage rather than Px

@model IEnumerable<GMSWeb.Models.ServiceModels.navMain>

　

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

<link rel='nofollow' href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" rel='nofollow' href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.easing.1.3.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>

<script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>

<style type="text/css">

html, body {

height: 100%;

}

.container {

height: 100%;

background: #f0e68c;

　

}

</style>

<title></title>

</head>

<body>

<div id = "page">

<div>

　

</div>

@{Html.EJ().Splitter("outterSplitter").PaneProperties(p =>

{

p.Add().ContentTemplate(

@<div class="cont">

@Html.EJ().TreeView("tree").TreeViewFields(s => s.Datasource((IEnumerable<GMSWeb.Models.ServiceModels.navMain>)ViewBag.TreeItems).Id("ID").ParentId("ParentID").Text("NodeName").HasChild("Haschild").Expanded("Expanded"))

</div>).PaneSize("200");

p.Add().ContentTemplate(

@<div class="cont">

@RenderSection("featured", required: false)

@RenderBody()

</div>).PaneSize("200");

}).Height("100%").Width("100%").Render();

}

</div>

　

　

@Html.EJ().ScriptManager()

@RenderSection("scripts", required: false)

<script type ="text/javascript">

$(function () {

$('#page').css("max-height", $(document).height());

});

</script>

</body>

</html>


Renders as


Height set to percentage

Here I set it to px of 400 which isn't the full height of the screen but the control does render



@model IEnumerable<GMSWeb.Models.ServiceModels.navMain>




　



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8" />






<meta name="viewport" content="width=device-width" />






@Styles.Render("~/Content/css")


@Scripts.Render("~/bundles/modernizr")


@Scripts.Render("~/bundles/jquery")


<link rel='nofollow' href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" />


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


<link rel="stylesheet" type="text/css" rel='nofollow' href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


<script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>


<script src="@Url.Content("~/Scripts/jquery.easing.1.3.min.js")"></script>


<script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>


<script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script>


<script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>


<style type="text/css">


html, body {


height: 100%;




}



.container {


height: 100%;


background: #f0e68c;




　



}



</style>


<title></title>


</head>


<body>


<div id = "page">


<div>




　



</div>


@{Html.EJ().Splitter("outterSplitter").PaneProperties(p =>




{


p.Add().ContentTemplate(



@<div class="cont">


@Html.EJ().TreeView("tree").TreeViewFields(s => s.Datasource((IEnumerable<GMSWeb.Models.ServiceModels.navMain>)ViewBag.TreeItems).Id("ID").ParentId("ParentID").Text("NodeName").HasChild("Haschild").Expanded("Expanded"))


</div>).PaneSize("200");




p.Add().ContentTemplate(



@<div class="cont">


@RenderSection("featured", required: false)




@RenderBody()




</div>).PaneSize("200");


}).Height("400px").Width("100%").Render();




}



</div>




　


　


@Html.EJ().ScriptManager()



@RenderSection("scripts", required: false)


<script type ="text/javascript">


$(function () {


$('#page').css("max-height", $(document).height());




});



</script>


</body>


</html>

Using PX to set height

The splitter renders correctly but using PX I can't make the height dynamic for different screens.

your assistance appreciated.


Josef



FP Francis Paul Antony Raj Syncfusion Team February 16, 2016 03:09 PM UTC

Hi Josef,


We have analyzed your code snippet. The widget height sets based on the parent element height, if its values specified in percentage.

In your sample, you have specified “max-height” for the parent element of the ejSplitter as document height. If you increase the document height by resizing the browser, “height” value will not change to the increased document height, since “max-height” value set as fixed once the page is loaded and it won’t change to new height whenever the browser resized.

So please specify the parent element “height” in percentage or pixels, since Splitter height will be set based on the immediate parent div only. If you specified in percentage, it will change dynamically based on the parent element height while resizing.  Please modify your code snippet as mentioned below.


$(function () {

            //height set to the ejSplitter’s parent div '#page'

            $('#page').css({"height":"100%"});

        });


For your convenience, we have prepared the sample based on your code. Please get the sample from the below location.

http://www.syncfusion.com/downloads/support/forum/122075/ze/Splitter2107360084

Please check with the given solution and let us know, if you need any further assistance.


Regards,

Francis Paul A


JS Josef Szeliga February 17, 2016 01:15 AM UTC

Thank you.
That did fix the issue.

FP Francis Paul Antony Raj Syncfusion Team February 17, 2016 08:56 AM UTC

Hi Josef,


Thanks for the update. We are glad to hear that the problem has been resolved.

Please get back to us, if you need any further assistance.


Regards,

Francis Paul A


Loader.
Up arrow icon