Hello Telerik,
I am having a problem in resizing(height=100%) the scheduler in Panel Bar. The height & width of the panel fixed to 100%. But it display white spce in panel item for scheduler. Also we try to give height of scheduler to 100%, but it was getting out of the panel item.
I have pasted my code below:
also have a look on the CSS, we are using pasted below:
It is displaying diffrently on 15", 17" & 19" monitor in terms of height.
Kindly help us
Thanks
Chinmay
I am having a problem in resizing(height=100%) the scheduler in Panel Bar. The height & width of the panel fixed to 100%. But it display white spce in panel item for scheduler. Also we try to give height of scheduler to 100%, but it was getting out of the panel item.
I have pasted my code below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head id="Head1" runat="server"> |
<title>CRM</title> |
<link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> |
<link href="Telerik/RadControls/SBM_Spliter/Splitter.SBM_Spliter.css" rel="stylesheet" |
type="text/css" /> |
<link href="Telerik/RadControls/SBM_Scheduler/Scheduler.SBM_Scheduler.css" rel="stylesheet" |
type="text/css" /> |
<link href="Telerik/RadControls/SBM_PanelBar/PanelBar.SBM_PanelBar.css" rel="stylesheet" |
type="text/css" /> |
</head> |
<body> |
<form runat="server" id="frmCRM" style="height: 100%"> |
<div id="wrapper"> |
<telerik:RadAjaxManager runat="server" ID="ajax_manager"> |
</telerik:RadAjaxManager> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<div id="content"> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" |
Width="100%" Height="100%" Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" |
ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" |
BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false"> |
<telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="10%" |
BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
Vipin |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> |
<telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="90%" |
BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
<telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" |
Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" |
ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" |
BorderSize="0" BorderStyle="None" BorderWidth="0px"> |
<telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" |
BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" |
Height="100%" /> |
<telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" |
BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" |
Height="100%" /> |
<telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" BorderWidth="0px" |
BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition"> |
<telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" |
Skin="SBM_PanelBar" Height="100%" Width="100%" AllowCollapseAllItems="true" EnableEmbeddedSkins="false"> |
<CollapseAnimation Type="InQuart" /> |
<Items> |
<telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="Calendar" |
BorderStyle="None" BorderWidth="0px"> |
<Items> |
<telerik:RadPanelItem runat="server" Value="Calendar"> |
<ItemTemplate> |
Vipin |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
<telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" Text="Scheduler" |
BorderStyle="None" BorderWidth="0px"> |
<Items> |
<telerik:RadPanelItem runat="server" Value="WeekScheduler"> |
<ItemTemplate> |
<div style="float:left; width: 100%; height:100%;"> |
<telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID" |
DataStartField="Start" DataSubjectField="Subject" EnableEmbeddedSkins="false" |
SelectedView="MultiDayView" ShowAllDayRow="false" ShowNavigationPane="false" |
Skin="SBM_Scheduler" CssClass="RadScheduler_SBM_Scheduler"> |
<MultiDayView ColumnHeaderDateFormat="D" NumberOfDays="2" UserSelectable="false" /> |
<WeekView UserSelectable="false" /> |
<MonthView UserSelectable="false" /> |
<TimelineView UserSelectable="false" /> |
<DayView UserSelectable="false" /> |
</telerik:RadScheduler></div> |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
<telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="To Do's" |
BorderStyle="None" BorderWidth="0px" BackColor="RosyBrown"> |
<Items> |
<telerik:RadPanelItem runat="server" Value="TODO"> |
<ItemTemplate> |
Vipin |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelBar> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</div> |
<div id="footer"> |
|
</div> |
</div> |
</form> |
</body> |
</html> |
html, body, form { |
font-family: sans-serif, serif, "Trebuchet MS", Verdana; |
font-size: 11px; |
font-weight: normal; |
color: #000000; |
text-decoration: none; |
line-height: 18px; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 100%; |
} |
#wrapper { |
padding: 0px; |
width: 100%; |
margin-top: 0px; |
margin-right: auto; |
margin-bottom: 0px; |
margin-left: 0px; |
height: 99%; |
position: absolute; |
clip: rect(0px,auto,auto,0px); |
} |
#header { |
margin: 0px; |
padding: 0px; |
float: left; |
width: 100%; |
height: 100%; |
border: 0px none #A6DBFF; |
background-color: #fefeff; |
text-align: center; |
background-image: url('../img/header_backg.jpg'); |
background-position: bottombottom; |
background-repeat:repeat-x; |
} |
#content { |
margin: 0px; |
padding: 0px; |
float: left; |
width: 100%; |
border-right-width: 0px; |
border-left-width: 0px; |
border-right-style: none; |
border-left-style: none; |
border-right-color: #A6DBFF; |
border-left-color: #A6DBFF; |
border-bottom-width: 0px; |
border-bottom-style: none; |
border-bottom-color: #A6DBFF; |
height: 98%; |
} |
#content #leftcolumn { |
margin: 0px; |
float: left; |
width: 15%; |
padding-top: 0px; |
padding-right: 0px; |
padding-bottom: 1%; |
padding-left: 0px; |
} |
#content #centrecolumn { |
margin: 0px; |
float: left; |
width: 26%; |
border-right-width: 0px; |
border-right-style: none; |
border-right-color: #A6DBFF; |
padding-top: 0px; |
padding-right: 0px; |
padding-bottom: 1%; |
padding-left: 0px; |
height: 98%; |
border-left-width: 0px; |
border-left-style: none; |
border-left-color: #A6DBFF; |
} |
#content #rightcolumn { |
margin: 0px; |
float: left; |
width: 58%; |
padding-top: 0px; |
padding-right: 0px; |
padding-bottom: 1%; |
padding-left: 0px; |
height: 98%; |
} |
#footer { |
margin: 0px; |
padding: 0px; |
clear: both; |
height: 2%; |
border-right-width: 1px; |
border-bottom-width: 1px; |
border-left-width: 0px; |
border-right-style: none; |
border-bottom-style: solid; |
border-left-style: none; |
border-right-color: #A6DBFF; |
border-bottom-color: #A6DBFF; |
border-left-color: #A6DBFF; |
width: 100%; |
font-size: 10px; |
background-color: #A6DBFF; |
} |
#content .top { |
margin: 0px; |
padding: 0px; |
float: left; |
height: 100%; |
width: 100%; |
border-bottom-width: 1px; |
border-bottom-style: solid; |
border-bottom-color: #A6DBFF; |
} |
#content .bottombottom { |
margin: 0px; |
padding: 0px; |
float: left; |
height: 100%; |
width: 100%; |
} |
#search_contacts |
{ |
width:98%; |
margin:0px; |
padding:8px; |
border: none 0px #ff0000; |
float:left; |
background-color: #A6DBFF; |
} |
#search_contacts .txtfield |
{ |
border: solid 1px #000000; |
width: auto; |
font-size: 11px; |
padding: 2px; |
} |
#search_contacts .btn_add |
{ |
color: #FFFFFF; |
margin: 0px; |
padding: 0px; |
height: 20px; |
width: 50px; |
border-top-width: 0px; |
border-right-width: 0px; |
border-bottom-width: 0px; |
border-left-width: 0px; |
border-top-style: none; |
border-right-style: none; |
border-bottom-style: none; |
border-left-style: none; |
background-color: #AF251B; |
font-family: sans-serif, serif, Verdana, "Trebuchet MS" , Arial; |
font-size: 12px; |
cursor: pointer; |
cursor: hand; |
} |
#contacts_grid |
{ |
width:98%; |
margin:0px; |
padding:0px; |
border: none 0px #ff0000; |
float:left; |
background-color: #A6DBFF; |
} |
.ApplyPosition |
{ |
position: relative !important; |
} |
Kindly help us
Thanks
Chinmay