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