1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="100percentHeight.aspx.cs" Inherits="ZeeControls2Demo.LayoutExamples._00percentHeight" Theme="Default"%>
2
3 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9 <title>100% Height Layout</title>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14 <cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" FitParent="FitWindow"
15 Height="700px" Orientation="Horizontal" Width="785px"><Panels>
16 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
17 Header
18 </Content>
19 </cc1:WebSplitterPanel>
20 <cc1:WebSplitterPanel runat="server" Filled="True" ><Content>
21 <STRONG>100% Height Layout<BR /></STRONG><BR />
22 In this example, the height of the Header and Footer will remain constant when the
23 browser window is resized. The center content area will fit the remaining space.<br />
24 <br />
25 Relevant Container property values:<br />
26 <br />
27 <table border="1">
28 <tr>
29 <td style="width: 110px" class="tableColumnHeader">
30 </td>
31 <td style="width: 85px" align="center" class="tableColumnHeader">
32 FitParent</td>
33 <td style="width: 87px" align="center" class="tableColumnHeader">
34 Orientation</td>
35 <td style="width: 153px" align="center" class="tableColumnHeader">
36 SplitterProps.Thickness</td>
37 </tr>
38 <tr>
39 <td style="width: 110px" class="tableRowHeader">
40 Splitter container</td>
41 <td style="width: 85px" align="center">
42 FitWindow</td>
43 <td style="width: 87px" align="center">
44 Horizontal</td>
45 <td style="width: 153px" align="center">
46 1</td>
47 </tr>
48 </table>
49 <br />
50 <br />
51 Relevant Panel property values:<br />
52 <br />
53 <table border="1">
54 <tr>
55 <td style="width: 109px; height: 21px;" class="tableColumnHeader">
56 </td>
57 <td style="width: 49px; height: 21px" align="center" class="tableColumnHeader">
58 Filled</td>
59 <td style="width: 112px; height: 21px" align="center" class="tableColumnHeader">
60 Resizable</td>
61 <td style="width: 108px; height: 21px" align="center" class="tableColumnHeader">
62 PreferredSize</td>
63 <td style="width: 93px" align="center" class="tableColumnHeader">
64 CanCollapse</td>
65 </tr>
66 <tr>
67 <td style="width: 109px" class="tableRowHeader">
68 Header panel</td>
69 <td style="width: 49px" align="center">
70 False</td>
71 <td style="width: 112px" align="center">
72 False</td>
73 <td style="width: 108px" align="center">
74 50</td>
75 <td style="width: 93px" align="center">
76 None</td>
77 </tr>
78 <tr>
79 <td style="width: 109px" class="tableRowHeader">
80 Center content</td>
81 <td style="width: 49px" align="center">
82 True</td>
83 <td style="width: 112px" align="center">
84 True<br />
85 (don't care)</td>
86 <td style="width: 108px" align="center">
87 100<br />
88 (don't care)</td>
89 <td style="width: 93px" align="center">
90 None</td>
91 </tr>
92 <tr>
93 <td style="width: 109px" class="tableRowHeader">
94 Footer panel</td>
95 <td style="width: 49px" align="center">
96 False</td>
97 <td style="width: 112px" align="center">
98 False</td>
99 <td style="width: 108px" align="center">
100 50</td>
101 <td style="width: 93px" align="center">
102 None</td>
103 </tr>
104 </table>
105 </Content>
106 </cc1:WebSplitterPanel>
107 <cc1:WebSplitterPanel runat="server" PreferredSize="50" Resizable="False" ><Content>
108 Footer
109 </Content>
110 </cc1:WebSplitterPanel>
111 </Panels>
112 <SplitterProps Thickness="1" />
113 </cc1:WebSplitterContainer>
114
115 </div>
116 </form>
117 </body>
118 </html>
119
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace ZeeControls2Demo.LayoutExamples
13 {
14 public partial class _00percentHeight : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18
19 }
20 }
21 }
22
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>