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

RadControlsAJAXCourseware - Getting Started section

2 Answers 158 Views

Documentation and Tutorials

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

Steve asked on 19 Sep 2013, 02:20 PM

Courseware---Getting-Started.PNG

Courseware---Getting-Started-2.PNG

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</form>

</body>

</html>

2 Answers, 1 is accepted

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.