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

RadControlsAJAXCourseware - Getting Started section

2 Answers 41 Views
Documentation and Tutorials
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 19 Sep 2013, 02:20 PM

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 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 20 Sep 2013, 05:04 PM
Anyone got solutions/ideas/suggestions? I still need help with this. Thanks!
0
Kate
Telerik team
answered on 23 Sep 2013, 01:46 PM
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.
Tags
Documentation and Tutorials
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Kate
Telerik team
Share this question
or