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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Splitter setting full page height

Thread ID:

Created:

Updated:

Platform:

Replies:

122075 Feb 14,2016 08:35 PM Feb 17,2016 03:56 AM ASP.NET MVC 5
loading
Tags: Splitter
Josef Szeliga
Asked On February 14, 2016 08:35 PM

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 ?


Francis Paul Antony Raj [Syncfusion]
Replied On February 15, 2016 08:43 AM

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


Josef Szeliga
Replied On February 15, 2016 07:29 PM

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



Francis Paul Antony Raj [Syncfusion]
Replied On February 16, 2016 10:09 AM

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


Josef Szeliga
Replied On February 16, 2016 08:15 PM

Thank you.
That did fix the issue.

Francis Paul Antony Raj [Syncfusion]
Replied On February 17, 2016 03:56 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;