RadControlsAJAXCourseware - Getting Started section

3 posts, 0 answers
  1. Steve
    Steve avatar
    2 posts
    Member since:
    Mar 2013

    Posted 19 Sep 2013 Link to this post

    Hello,

    I have completed the Getting Started section and it seems to be running fine as instructed except the 3x5 image appears to be on new line after the RadToolbar. On Courseware, it showed 3x5 tucked neatly right under RadMenu and to the right of RadToolbar. I went through line by line to see if I had typos but none found. I could have overlooked something. I ran the demo and got the same results.

    Tried on both Google Chrome Version 29.0.1547.66 m and IE10
    VS 2010
    Telerik 2013.2.717.40
    .Net v4.0.30319

    Images are provided to show the difference between mine and the tutorial.

    Thanks for any help.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3.Default" %>
     
    <%@ 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">
    <head runat="server">
        <title>Getting Started</title>
        <style type="text/css" media="screen">
            #content
            {
                background-image: url('images/3X5card.png');
                height: 165px;
                width: 500px;
                margin-left: 75px;
                vertical-align: top;
            }
            #tabs
            {
                margin-left: 75px;
                width: 500px;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadMenu1">
                        <UpdatedControls>                       
                            <telerik:AjaxUpdatedControl ControlID="RadMenu1" UpdatePanelRenderMode="Inline" />                       
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue" OnItemClick="RadMenu1_ItemClick"
                Width="100%">
                <CollapseAnimation Type="OutQuint" Duration="200" />
                <Items>
                    <telerik:RadMenuItem runat="server" ImageUrl="~/images/EditInformationHS.png" Text="Edit">
                        <Items>
                            <telerik:RadMenuItem runat="server" ImageUrl="~/images/CutHS.png" Text="Cut">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" ImageUrl="~/images/CopyHS.png" Text="Copy">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" ImageUrl="~/images/PasteHS.png" Text="Paste">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">
                        <Items>
                            <telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" ImageUrl="~/images/PrintPreviewHS.png" Text="Print Preview">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical" SingleClick="None"
                Skin="WebBlue" Width="80px" OnButtonClick="RadToolBar1_ButtonClick">
                <CollapseAnimation Type="OutQuint" Duration="200" />
                <Items>
                    <telerik:RadToolBarDropDown runat="server" ImageUrl="~/images/EditInformationHS.png"
                        Text="Edit">
                        <Buttons>
                            <telerik:RadToolBarButton runat="server" ImageUrl="~/images/CutHS.png" Text="Cut">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ImageUrl="~/images/CopyHS.png" Text="Copy">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ImageUrl="~/images/PasteHS.png" Text="Paste">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarDropDown>
                    <telerik:RadToolBarSplitButton runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">
                        <Buttons>
                            <telerik:RadToolBarButton runat="server" ImageUrl="~/images/PrintHS.png" Text="Print">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ImageUrl="~/images/PrintPreviewHS.png" Text="Print Preview">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarSplitButton>
                </Items>
            </telerik:RadToolBar>
            <div id="content" runat="server">
                <asp:Label ID="lblContent" runat="server" Text="Label"></asp:Label>
            </div>
            <div id="tabs" runat="server">
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip1_TabClick"
                    Orientation="HorizontalBottom" SelectedIndex="0" Skin="WebBlue" Width="530px">
                </telerik:RadTabStrip>
            </div>
        </div>
        </form>
    </body>
    </html>
  2. Steve
    Steve avatar
    2 posts
    Member since:
    Mar 2013

    Posted 20 Sep 2013 Link to this post

    Anyone got solutions/ideas/suggestions? I still need help with this. Thanks!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 Sep 2013 Link to this post

    Hi Steve,

    Please try using the following css class selectors instead and check if this resolves the appearance issue from your side:
    <style type="text/css" media="screen">
            #content {
                background-image: url('images/3X5card.png');
                display:inline;
                height: 165px;
                width: 500px;
                margin-left: 5px;
                vertical-align: top;
            }
     
            #tabs {
                margin-left: 85px;
                width: 500px;
                vertical-align: bottom;
            }
        </style>

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top