Skip to content

Commit 4dae468

Browse files
marin-bratanovdimodi
marin-bratanov
and
dimodi
authored
feat(splitter): 100% height example (#113)
* feat(splitter): 100% height example * Update splitter/use-100-percent-viewport/readme.md Co-authored-by: Dimo Dimov <[email protected]> * Update splitter/use-100-percent-viewport/readme.md Co-authored-by: Dimo Dimov <[email protected]> * Update splitter/use-100-percent-viewport/readme.md Co-authored-by: Dimo Dimov <[email protected]> * Update splitter/use-100-percent-viewport/use-100-percent-viewport/Shared/MainLayout.razor Co-authored-by: Dimo Dimov <[email protected]> * Update splitter/use-100-percent-viewport/use-100-percent-viewport/Shared/MainLayout.razor Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 8d7c6c2 commit 4dae468

32 files changed

+1413
-0
lines changed

‎splitter/use-100-percent-viewport/readme.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# How to make Splitter take 100% height of the viewport
2+
3+
When creating layouts with the Splitter, it is a common requirement that they take up 100% of the available height.
4+
5+
To accomplish this, simply set the Splitter's `Height` parameter to `100%`.
6+
7+
It is important to note that this relies on the standard CSS behavior of setting height in percent - all parent elements must have a `height` set, so that the content size can be calculated based off the viewport.
8+
9+
This example shows a basic layout with the splitter that has:
10+
* header
11+
* footer
12+
* sidebar
13+
14+
where
15+
* the header and footer have static dimensions
16+
* the whole layout takes up 100% height and width of the viewport
17+
* the content (`@Body`) takes 100% height and width of the remaining space after the header, footer and sidebar are rendered
18+
19+
This is accomplished by:
20+
* setting `Width` and `Height` to `100%` for the splitters;
21+
* adding `height:100%` styles to the splitter parents (`html` and `body` in this example) in the app stylesheet.
22+
23+
The code is in `~Shared/MainLayout.razor`. Comments in the code offer some more details.

‎splitter/use-100-percent-viewport/use-100-percent-viewport.sln

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 16
4+
VisualStudioVersion = 16.0.31515.178
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "use_100_percent_viewport", "use-100-percent-viewport\use_100_percent_viewport.csproj", "{C40859D5-CA55-4AD2-9A16-6D8ACC052759}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{C40859D5-CA55-4AD2-9A16-6D8ACC052759}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{C40859D5-CA55-4AD2-9A16-6D8ACC052759}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{C40859D5-CA55-4AD2-9A16-6D8ACC052759}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{C40859D5-CA55-4AD2-9A16-6D8ACC052759}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {D3AC4173-B19A-4D14-A880-FD2CC2485986}
24+
EndGlobalSection
25+
EndGlobal

‎splitter/use-100-percent-viewport/use-100-percent-viewport/App.razor

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Router AppAssembly="typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<h1>Page not found</h1>
7+
<p>Sorry, but there's nothing here!</p>
8+
</NotFound>
9+
</Router>

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Data/WeatherForecast.cs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using System;
2+
3+
namespace use_100_percent_viewport.Data
4+
{
5+
public class WeatherForecast
6+
{
7+
public DateTime Date { get; set; }
8+
9+
public int TemperatureC { get; set; }
10+
11+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
12+
13+
public string Summary { get; set; }
14+
}
15+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Data/WeatherForecastService.cs

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
using System;
2+
using System.Linq;
3+
using System.Threading.Tasks;
4+
5+
namespace use_100_percent_viewport.Data
6+
{
7+
public class WeatherForecastService
8+
{
9+
private static readonly string[] Summaries = new[]
10+
{
11+
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
12+
};
13+
14+
public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
15+
{
16+
var rng = new Random();
17+
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
18+
{
19+
Date = startDate.AddDays(index),
20+
TemperatureC = rng.Next(-20, 55),
21+
Summary = Summaries[rng.Next(Summaries.Length)]
22+
}).ToArray());
23+
}
24+
}
25+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Pages/Counter.razor

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/counter"
2+
3+
<h1>Counter</h1>
4+
5+
<p>Current count: @currentCount</p>
6+
7+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
8+
9+
@code {
10+
int currentCount = 0;
11+
12+
void IncrementCount()
13+
{
14+
currentCount++;
15+
}
16+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Pages/FetchData.razor

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/fetchdata"
2+
@using use_100_percent_viewport.Data
3+
@inject WeatherForecastService ForecastService
4+
5+
<h1>Weather forecast</h1>
6+
7+
<p>This component demonstrates fetching data from a service.</p>
8+
9+
@if (forecasts == null)
10+
{
11+
<p><em>Loading...</em></p>
12+
}
13+
else
14+
{
15+
<table class="table">
16+
<thead>
17+
<tr>
18+
<th>Date</th>
19+
<th>Temp. (C)</th>
20+
<th>Temp. (F)</th>
21+
<th>Summary</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
@foreach (var forecast in forecasts)
26+
{
27+
<tr>
28+
<td>@forecast.Date.ToShortDateString()</td>
29+
<td>@forecast.TemperatureC</td>
30+
<td>@forecast.TemperatureF</td>
31+
<td>@forecast.Summary</td>
32+
</tr>
33+
}
34+
</tbody>
35+
</table>
36+
}
37+
38+
@code {
39+
WeatherForecast[] forecasts;
40+
41+
protected override async Task OnInitializedAsync()
42+
{
43+
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
44+
}
45+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Pages/Index.razor

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@page "/"
2+
3+
<h1>Hello, world!</h1>
4+
5+
Welcome to your new app.<br />
6+
7+
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
8+
9+
<br />
10+
11+
@helloString
12+
13+
@code {
14+
MarkupString helloString;
15+
16+
void SayHelloHandler()
17+
{
18+
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
19+
helloString = new MarkupString(msg);
20+
}
21+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Pages/_Host.cshtml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/"
2+
@namespace use_100_percent_viewport.Pages
3+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>use_100_percent_viewport</title>
11+
<base href="~/" />
12+
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
13+
<link href="css/site.css" rel="stylesheet" />
14+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
15+
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
16+
</head>
17+
<body>
18+
<component type="typeof(App)" render-mode="ServerPrerendered" />
19+
20+
<div id="blazor-error-ui">
21+
<environment include="Staging,Production">
22+
An error has occurred. This application may no longer respond until reloaded.
23+
</environment>
24+
<environment include="Development">
25+
An unhandled exception has occurred. See browser dev tools for details.
26+
</environment>
27+
<a href class="reload">Reload</a>
28+
<a class="dismiss">🗙</a>
29+
</div>
30+
31+
<script src="_framework/blazor.server.js"></script>
32+
</body>
33+
</html>

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Program.cs

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Microsoft.AspNetCore;
2+
using Microsoft.AspNetCore.Hosting;
3+
using Microsoft.Extensions.Configuration;
4+
using Microsoft.Extensions.Hosting;
5+
using Microsoft.Extensions.Logging;
6+
using System;
7+
using System.Collections.Generic;
8+
using System.IO;
9+
using System.Linq;
10+
using System.Threading.Tasks;
11+
12+
namespace use_100_percent_viewport
13+
{
14+
public class Program
15+
{
16+
public static void Main(string[] args)
17+
{
18+
CreateHostBuilder(args).Build().Run();
19+
}
20+
21+
public static IHostBuilder CreateHostBuilder(string[] args) =>
22+
Host.CreateDefaultBuilder(args)
23+
.ConfigureWebHostDefaults(webBuilder =>
24+
{
25+
webBuilder.UseStaticWebAssets();
26+
webBuilder.UseStartup<Startup>();
27+
});
28+
}
29+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Properties/launchSettings.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:55276/",
7+
"sslPort": 44398
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"use_100_percent_viewport": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"environmentVariables": {
22+
"ASPNETCORE_ENVIRONMENT": "Development"
23+
},
24+
"applicationUrl": "https://localhost:5001;http://localhost:5000"
25+
}
26+
}
27+
}

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Shared/MainLayout.razor

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@layout TelerikLayout
2+
3+
@inherits LayoutComponentBase
4+
5+
<style>
6+
/* CSS rules to prepare the whole 100% height layout
7+
Note that for percentage height to work, the parent element must have a defined height in percent or pixels. If the parent has a percentage height too, rule applies up the DOM tree until a pixel height is reached, or until the <html> element is reached.
8+
*/
9+
html, body {
10+
height: 100%;
11+
margin: 0;
12+
overflow: hidden;
13+
}
14+
</style>
15+
16+
<TelerikSplitter Height="100%" Width="100%" Orientation="@SplitterOrientation.Vertical">
17+
<SplitterPanes>
18+
19+
@*Header*@
20+
<SplitterPane Resizable="false" Size="100px">
21+
<div style="height:100%; background: green;">
22+
@*Sample styles to showcase where content renders*@
23+
<h1>I am the header</h1>
24+
</div>
25+
</SplitterPane>
26+
27+
@*Main content*@
28+
<SplitterPane>
29+
<TelerikSplitter Width="100%" Height="100%" Class="k-pane-flex">
30+
<SplitterPanes>
31+
32+
@*Left navigation*@
33+
<SplitterPane Size="300px" Collapsible="true">
34+
<div style="height:100%; background: yellow;">
35+
SIDEBAR
36+
<NavMenu></NavMenu>
37+
</div>
38+
</SplitterPane>
39+
40+
@*Page (main) content*@
41+
<SplitterPane>
42+
@*Automatic scrollbars for the content, you can choose where you want scolling to happen*@
43+
<div style="height: 100%; overflow: auto;">
44+
@Body
45+
</div>
46+
</SplitterPane>
47+
48+
</SplitterPanes>
49+
</TelerikSplitter>
50+
</SplitterPane>
51+
52+
@*Footer*@
53+
<SplitterPane Resizable="false" Size="100px">
54+
<div style="height:100%; background: #f99;">
55+
@*Sample styles to showcase where content renders*@
56+
<h2>I am the FOOTER &copy;@DateTime.Now.Date.Year MyCompany Inc.</h2>
57+
</div>
58+
</SplitterPane>
59+
60+
</SplitterPanes>
61+
</TelerikSplitter>

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Shared/NavMenu.razor

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<ul class="nav flex-column">
2+
<li class="nav-item px-3">
3+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
4+
<span class="oi oi-home" aria-hidden="true"></span> Home
5+
</NavLink>
6+
</li>
7+
<li class="nav-item px-3">
8+
<NavLink class="nav-link" href="counter">
9+
<span class="oi oi-plus" aria-hidden="true"></span> Counter
10+
</NavLink>
11+
</li>
12+
<li class="nav-item px-3">
13+
<NavLink class="nav-link" href="fetchdata">
14+
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
15+
</NavLink>
16+
</li>
17+
</ul>

‎splitter/use-100-percent-viewport/use-100-percent-viewport/Shared/TelerikLayout.razor

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@inherits LayoutComponentBase
2+
3+
<TelerikRootComponent>
4+
@Body
5+
</TelerikRootComponent>

0 commit comments

Comments
 (0)