This question is locked. New answers and comments are not allowed.
It's a classic CSS issue that I have solved in the past but what is the recommended way to have the footer aligned with the bottom of the users window (jquery resizing?) and specifying a min height for panes. I think this should be included in the demos as a very high percentage of people will be scratching their head over this.
Perhaps it could be a bool property of a pane (e.g pane.FitToScreen(true); ) that creates the desired HtmlAttributes or uses jquery to resize panes to expand to the remaining width and height of the screen. This feature is present on some other splitters and seems essential given how most splitters are employed.
Regards,
Tom.
Perhaps it could be a bool property of a pane (e.g pane.FitToScreen(true); ) that creates the desired HtmlAttributes or uses jquery to resize panes to expand to the remaining width and height of the screen. This feature is present on some other splitters and seems essential given how most splitters are employed.
Regards,
Tom.
11 Answers, 1 is accepted
0
Hello Tom,
The attached solution contains a full-screen splitter with a header, footer and scrollable content area. Is that what you are looking for? If yes, it is unlikely that we will have a dedicated property for this, since it requires setting of properties of the <html> and <body> elements. We will, however, document this scenario in a code library.
Kind regards,
Alex Gyoshev
the Telerik team
The attached solution contains a full-screen splitter with a header, footer and scrollable content area. Is that what you are looking for? If yes, it is unlikely that we will have a dedicated property for this, since it requires setting of properties of the <html> and <body> elements. We will, however, document this scenario in a code library.
Kind regards,
Alex Gyoshev
the Telerik team
0
tom
Top achievements
Rank 1
Rank 1
answered on 24 Mar 2011, 12:34 PM
Thank you this worked perfectly.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 29 Mar 2011, 12:29 PM
Similarly
I have a grid nested in a splitter as per the demos, however half the grid is cut off and i cant see where i alter the height of the splitter to accommodate this...anything ive read suggests it should dynamically stretch?
ive removed all maxsize etc??
I have a grid nested in a splitter as per the demos, however half the grid is cut off and i cant see where i alter the height of the splitter to accommodate this...anything ive read suggests it should dynamically stretch?
ive removed all maxsize etc??
0
Hello Michael,
Stretching the grid will require JavaScript. Please see the Home/Grid action in the attached solution.
All the best,
Alex Gyoshev
the Telerik team
Stretching the grid will require JavaScript. Please see the Home/Grid action in the attached solution.
All the best,
Alex Gyoshev
the Telerik team
0
Jeroen
Top achievements
Rank 1
Rank 1
answered on 24 Jan 2012, 09:35 AM
I'm using your first example in this post. I've put a telerik menu in the top pane, but for some reason it renders this outside the splitter. Above it to be exact, while the div logo is rendered inside the splitter. Is this my mistake or is there some css I am overlooking? Find code below.
<body>
@(Html.Telerik().Splitter()
.Name("page").Orientation(SplitterOrientation.Vertical).Panes(vPanes =>{vPanes.Add().Resizable(false).Collapsible(false).Scrollable(false).Size("120px").HtmlAttributes(new { @class = "noborder header" }).Content(@<text><div id="logo"> </div>@{Html.Telerik().Menu() .........0
Hello Jeroen,
Dimo
the Telerik team
Your code snippet does not indicate a possible reason for the problem. I can suggest you to:
- validate the HTML markup on the page to make sure there are no unclosed tags;
- check for uncleared floats
- remove any custom CSS that you have
- compare your implementation with the one in the previously attached example, even start over from the working example
If the issues persists, please provide a runnable demo for us to test further.
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Jeroen
Top achievements
Rank 1
Rank 1
answered on 24 Jan 2012, 01:35 PM
I've attached the solution. Basically _layout.cshtm has no links to the Site.css so the problem should be in the cshtml file. Thanks for your help because Ive spend too much time on this already.
0
Hello Jeroen,
When using nested components, you should have a @{ } code block on the outer component.
Changing the code block will also require adding a .Render(); statement at the end of the Splitter declaration.
Greetings,
Dimo
the Telerik team
When using nested components, you should have a @{ } code block on the outer component.
Changing the code block will also require adding a .Render(); statement at the end of the Splitter declaration.
Greetings,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Garry
Top achievements
Rank 2
Veteran
Rank 2
Veteran
answered on 06 Feb 2012, 03:38 PM
Cannot open that project in VS2010:
C:\Development\.....\FullScreenSplitter.csproj : error : The project file 'C:\Development\....\FullScreenSplitter.csproj' cannot be opened.
The project type is not supported by this installation.
You have to manually edit the .CSPROJ file and remove GUID settings!
http://social.msdn.microsoft.com/Forums/en/vssetup/thread/e68a080d-b394-4c8b-b593-438b82c284b8
Actually, now that I have opened the project, I find that it is full of client side javascript.
I only want to find out how to make the splitters height 100%.
Do I really need to re-architect my ASP.Net app to MVC and Javashit to get it to do that?
C:\Development\.....\FullScreenSplitter.csproj : error : The project file 'C:\Development\....\FullScreenSplitter.csproj' cannot be opened.
The project type is not supported by this installation.
You have to manually edit the .CSPROJ file and remove GUID settings!
http://social.msdn.microsoft.com/Forums/en/vssetup/thread/e68a080d-b394-4c8b-b593-438b82c284b8
Actually, now that I have opened the project, I find that it is full of client side javascript.
I only want to find out how to make the splitters height 100%.
Do I really need to re-architect my ASP.Net app to MVC and Javashit to get it to do that?
0
Hi Garry,
In order to make the MVC Splitter automatically resize with the browser window, you need only a couple of lines of Javascript, as shown in the previously attached project:
var splitter = $('#FullScreen').data('tSplitter');
$(window).bind('resize', function() {
splitter.resize();
});
I am not sure what do you mean "full of client-side Javascript" - probably you are referring to the MVC components' client-side source code. However, only the required files are registered on the page, and moreover, the ScriptRegistrar can combine and compress them for faster loading.
Regards,
Dimo
the Telerik team
In order to make the MVC Splitter automatically resize with the browser window, you need only a couple of lines of Javascript, as shown in the previously attached project:
var splitter = $('#FullScreen').data('tSplitter');
$(window).bind('resize', function() {
splitter.resize();
});
I am not sure what do you mean "full of client-side Javascript" - probably you are referring to the MVC components' client-side source code. However, only the required files are registered on the page, and moreover, the ScriptRegistrar can combine and compress them for faster loading.
Regards,
Dimo
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Kritika
Top achievements
Rank 1
Rank 1
answered on 13 Jun 2012, 01:55 PM
I am creating a vertical panel splitter where I am having two panels,
In the Left panel i am displaying the telerik grid, and initially displaying 100 rows of grid.
I need the grid to take the complete page height and do not showing the scroller,
I have tried following for this:
1.) added the below css
#Splitter
{
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
2.) tried to apply the height using the jquery;
$(".t-splitter").css("height", "auto");
3.) Tried the below code:
var splitter = $('#Splitter').data('tSplitter');
$(window).bind('resize', function () {
splitter.resize();
});
4.) #Splitter.t-splitter
{
height:800px;
}
But none of the above increased the height of the panel, instead the #4 above, which is the hardcoded value of the height.
Please suggest me the possible solution for this ...
In the Left panel i am displaying the telerik grid, and initially displaying 100 rows of grid.
I need the grid to take the complete page height and do not showing the scroller,
I have tried following for this:
1.) added the below css
#Splitter
{
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
2.) tried to apply the height using the jquery;
$(".t-splitter").css("height", "auto");
3.) Tried the below code:
var splitter = $('#Splitter').data('tSplitter');
$(window).bind('resize', function () {
splitter.resize();
});
4.) #Splitter.t-splitter
{
height:800px;
}
But none of the above increased the height of the panel, instead the #4 above, which is the hardcoded value of the height.
Please suggest me the possible solution for this ...