This is a migrated thread and some comments may be shown as answers.

Problem with layout

7 Answers 123 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Web Services
Top achievements
Rank 2
Web Services asked on 28 Aug 2009, 08:16 PM
I have a calendar you can view here
http://alpha.clickablecommunity.com/Calendar.aspx
When the page loads initially the calendar views fine. However, as soon as you change the view i.e. to day or month the calendar gets wider. However, if you resize your browser window at all (doubleclick to resize down and then resize up again), then it goes back to the proper size. I am completely stumped on this one. Here is my code.
aspx
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="Calendar.aspx.vb" Inherits="ClickableCommunity.Calendar" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
    function HideAppointment() {  
    
        var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
        var app1 = Scheduler.get_appointments();  
        alert("Hiding the appointment : " + app1.getAppointment(1).get_subject());
        app1.getAppointment(1).style.display = "none";    // Hide the first appointment   
        
    }//HideAppointment
    function ShowAppointment() {  
    
        var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
        var app1 = Scheduler.get_appointments();  
        alert("Showing the appointment : " + app1.getAppointment(1).get_subject());
        app1.getAppointment(1)._domElements[0].style.display = "block";   // Show the first appointment
        
    }//ShowAppointment
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="menuContent" runat="server">
<span style="padding-left:10px;">Coming soon...<br />
                                <a href="#" onclick="HideAppointment()">Hide</a></span>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div id="divCalendar">
    <telerik:RadScheduler ID="RadScheduler1" runat="server" Height="500px"
                          HoursPanelTimeFormat="htt" Skin="Web20" ValidationGroup="RadScheduler1"
                          GroupingDirection="Vertical" CssClass="calendarView"
        SelectedView="WeekView"
        WeekView-DayStartTime="08:00:00"
        WeekView-DayEndTime="23:59:00"
        WeekView-WorkDayEndTime="23:59:00"
        WeekView-WorkDayStartTime="08:00:00"
        WorkDayEndTime="23:59:00"
        DayEndTime="23:59:00"
        DayView-DayEndTime="23:59:00"
        DayView-DayStartTime="08:00:00"
        DayView-WorkDayEndTime="23:59:00"
        DayView-WorkDayStartTime="08:00:00" AllowDelete="false" AllowEdit="false" AllowInsert="false"
        TimelineView-NumberOfSlots="7">
        <DayView GroupingDirection="Horizontal" UserSelectable="True"  />
        <TimelineView GroupingDirection="Horizontal" />
        <WeekView GroupingDirection="Horizontal" />
    </telerik:RadScheduler>
    </div>
<asp:SqlDataSource ID="eventsDataSource" runat="server"
    ConnectionString="<%$ ConnectionStrings:connectionString %>"
    SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</asp:Content>

VB
Imports System.Data
Imports System.Data.Sql
Imports System.Data.SqlClient
Imports Telerik.Web.UI
Partial Public Class Calendar
    Inherits System.Web.UI.Page

    'my connection string
    Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ToString
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not (Page.IsPostBack) Then

            Dim table As DataTable = New DataTable()
            table.Columns.Add("start")
            table.Columns.Add("end")
            table.Columns.Add("key")
            table.Columns.Add("subject")

            'my sql connection
            Dim myConn As New Data.SqlClient.SqlConnection(conn)

            'the name of the stored procedure
            Dim strSQL = "returnAllEvents"

            Dim returnCommand As New Data.SqlClient.SqlCommand(strSQL, myConn)

            'tell the system it is a stored procedure
            returnCommand.CommandType = CommandType.StoredProcedure

            Try
                myConn.Open()
                Dim dr As SqlDataReader = returnCommand.ExecuteReader()

                While dr.Read()

                    '0eventid, 1FK_CategoryID, 2latitude, 3longitude, 4events.name, 5description, 6businesses.name,
                    '7starttime, 8stoptime, 9locations.street, 10locations.city, 11locations.state, 12locations.zip

                    'set all of the textboxes to the input
                    table.Rows.Add(New String() {dr.Item(7), dr.Item(8), dr.Item(0), _
                                                 "Name: " & dr.Item(6)})

                End While 'while dr.read()

            Catch ex As Exception

            Finally

            End Try

            Dim calendar As RadScheduler = RadScheduler1
            calendar.DataSource = table
            calendar.DataStartField = "start"
            calendar.DataEndField = "end"
            calendar.DataKeyField = "key"
            calendar.DataSubjectField = "subject"
            calendar.DataBind()

        End If 'if not page.ispostback
    End Sub

End Class

Master page
 <%@ Master Language="VB" AutoEventWireup="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
<!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">
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.Sql" %>
<%@ import namespace="System.Data.SqlClient" %>
<%@ import namespace="Telerik.Web.UI" %>
<head id="Head1" runat="server">
    <link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">
    <form id="Form1" method="post" runat="server" style="height: 100%">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <br />
    <asp:ContentPlaceHolder ID="header" runat="server">
    </asp:ContentPlaceHolder>
    <div id="loginDiv">
        <loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
    </div>
    <div id="topDiv">
        <div id="image" class="topDivImage">
            <img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
        </div>
        <div id="viewMenu" class="viewMenu">
            <center>
                <table><tr><td>
                    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Events View">
                                <Items>
                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Map">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem runat="server" NavigateUrl="~/Lis.aspx" Text="List">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem runat="server" Text="Calendar" NavigateUrl="Calendar.aspx">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
                </td></tr></table>
            </center>
        </div>
    </div>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" CssClass="AllContent" LiveResize="true">
        <telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
            BorderStyle="None" BorderSize="0">
            <div id="leftPanel">
                <asp:ContentPlaceHolder ID="menuContent" runat="server">
                    
                </asp:ContentPlaceHolder>
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
            ForeColor='Green' />
        <telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
            BorderStyle="None" BorderSize="0" Height="100%">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            
            </asp:ContentPlaceHolder>
        </telerik:RadPane>
        
    </telerik:RadSplitter>
    </form>
</body>
</html>
And css
html, body, form  
{  
   height: 100%;
   width: 100%;
   margin: 0;  
   padding:0;  
}
#leftPanel{
    display:inline;
    width:220px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
        
}
.normalText{
    font-size:12px;
    font-family: Arial;
}
.loginLabel{
    padding-right: 10px;
    padding-bottom: 10px;
}
.loginTextBox{
    width: 120px;
}
.leftPanelContent{
    padding-bottom: 30px;
}
#topDiv{
    height: 60px;
    border-bottom-width: 4px;
    border-bottom-color: Gray;
    border-bottom-style:groove;
        
}
.calendarView{
    width:auto !important;
}
.tableColumn{
    width:150px;
}
#loginDiv{
    position: absolute;
    display:inline;
    right: 10px;
    top: 5px;
}
#menuDiv{
    position: absolute;
    padding-top: 75px;
    margin-left: auto;
    margin-right:auto;
}
.AllContent{
    border-right: none;
    height: auto;
    
}
.businessToolTip{
    position: absolute;
    z-index: 500;
    top:300px;
    left:300px;
}
.stateDropDownText{
    font-size: 11px;
    font-family: Arial;

}
.adminTableDiv{
    text-align: center;
    width: 200px;
    height:100%;
    padding-right:20px;
    display: inline;
}
.adminMainDiv{
    width: 420px;
}
.center{
    padding-left:auto;
    padding-right:auto;
}
.textRed{
    color: Red;
}
.successText{
    color:Green;
}
.addBusinessSpacing{
    padding-right: 20px;
    height: 70px;
}
.adminTableLabel{
    text-align: center;
    display: block;
}
.addBusinessTextBox{
    width:150px;
    text-align:center;
}
#MainContent{
    display:inline;

}
.displayInline{
    display: inline;
}
#divMap{
    height: 500px;
    border: groove 4px #EEEEEE;
    border-right: groove 4px #EEEEEE;
    margin-left: auto;
    margin-right: auto;
    padding-right: 10px;
}
#divCalendar{
    height: 500px;
    border: groove 4px #EEEEEE;
    margin-left: auto;
    margin-right: auto;
    width:auto;
}
.RightPanelPadding
{
    position: relative;
    height:auto !important;
    padding-left: 10px;
    padding-top:10px;
    padding-right:10px;
    padding-bottom: 10px;
    margin-top: auto;
    margin-bottom: auto;
    
    
}
.errorMessage{
    color: Red;
    font-size: 10px;
    font-family: Arial;
}
.topDivImage{
position: absolute;
top: 0;
left: 0;
display:inline;
width:220px;
}
.viewMenu{
padding-left:220px;
margin-right:auto;
margin-left:auto;
text-align:center;
width:800px;
vertical-align:bottom;
padding-top: 34px;
}
.emptyTextboxText{

    font-style:italic;
    font-size:10px;
    color: #D8D8D8;

}

Although I bind it in the codebehind, you can do it in the aspx page and get the same problem. Any ideas? Thanks,


7 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 02 Sep 2009, 03:04 PM
Hello,

You probably modified the page because some javascript errors are reported and the source doesn't look like the one you sent. Are you still having the issue you described or you fixed it already?

Best wishes,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Web Services
Top achievements
Rank 2
answered on 02 Sep 2009, 03:14 PM
I am trying to add some JS to add a rad tree that shows the apointments on client click. I still have the problem but it is on hold until I get this issue resolved because it is a higher priority. I'll post back when I have the issue. Thanks,
0
Web Services
Top achievements
Rank 2
answered on 03 Sep 2009, 06:08 PM
The page is up with the same problem it is located here
http://alpha.clickablecommunity.com/Calendar2.aspx
If I need to post any other code or anything just let me know. I appreciate any help. Thanks,
0
Kamen Bundev
Telerik team
answered on 09 Sep 2009, 08:56 AM
Hi,

The problem stems from the 10px padding you're setting on the .RightPanelPadding class. Padding is part of the block and taken into account when the width is calculated.

Try moving the padding as margin from this class to #divCalendar, like this:
#divCalendar{
    height: 500px;
    border: groove 4px #EEEEEE;
    margin-left: auto;
    margin-right: auto;
    width:auto;
    margin: 10px;
}
.RightPanelPadding
{
    position: relative;
    height: auto !important;
}


Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Web Services
Top achievements
Rank 2
answered on 09 Sep 2009, 03:44 PM
So that sort of fixed it. Now, however, when you change the view it stays on the page but get's moved almost to the edge. I put the margin where you said to. Any ideas why. You can still see it at the calendar2 link I provided earlier. At least it is on the page, just not spaced the same. I know these kinds of css questions are really difficult since IE likes to not follow the rules so I appriciate all of the help.
0
Kamen Bundev
Telerik team
answered on 11 Sep 2009, 02:41 PM
Hello,

Try removing all the padding from .RightPanelPadding and set width: 100% !important to it. Let me know how it goes.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Web Services
Top achievements
Rank 2
answered on 15 Sep 2009, 05:19 PM
That did it thanks.
Tags
Scheduler
Asked by
Web Services
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Web Services
Top achievements
Rank 2
Share this question
or