Problem with layout

8 posts, 0 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 28 Aug 2009 Link to this post

    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,


  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 02 Sep 2009 Link to this post

    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,
  5. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 03 Sep 2009 Link to this post

    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,
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Sep 2009 Link to this post

    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.
  7. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 09 Sep 2009 Link to this post

    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.
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Sep 2009 Link to this post

    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.
  9. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 15 Sep 2009 Link to this post

    That did it thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017