ToolBar itemtemplate not showing divs correctly

[Jason]

per the docs I should be able to place html markup in the ItemTemplate. I am trying to create a couple of div tags. One float left, the other floats right. Inside the ItemTemplate they are placed next to each other. When I copy the code outside of the template the divs works fine. What simple thing am I missing?

 

 

 

 

<%

 

 

@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!

 

 

 

 

 

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

 

 

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

 

 

<style type="text/css">

 

 

div.wrapper {

 

 

width:100%;

}

 

 

div.left_column {

 

 

width:150px;

 

 

float:left;

 

 

text-align:center;

 

 

vertical-align:middle;

}

 

 

div.right_column {

 

 

width:150px;

 

 

float:right;

 

 

text-align:center;

 

 

vertical-align:middle;

}

 

 

</style>

</

 

 

 

 

 

head>

<

 

 

 

 

 

body>

 

 

<form id="form1" runat="server">

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

<Scripts>

<%

 

 

--Needed for JavaScript IntelliSense in VS2010--%>

<%

 

 

--For VS2008 replace RadScriptManager with ScriptManager--%>

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

 

 

</Scripts>

 

 

</telerik:RadScriptManager>

 

 

<script type="text/javascript">

 

 

//Put your JavaScript code here.

 

 

</script>

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

</telerik:RadAjaxManager>

 

 

<div>

<%

 

 

-- does not work --%>

 

 

<telerik:RadToolBar runat="server" ID="RadToolBar1" Width="100%">

 

 

<Items>

 

 

<telerik:RadToolBarButton>

 

 

<ItemTemplate>

 

 

<div class="wrapper">

 

 

<div class="left_column">

left Collumn

 

 

</div>

 

 

<div class="right_column">

right Collumn

 

 

</div>

 

 

</div>

 

 

</ItemTemplate>

 

 

</telerik:RadToolBarButton>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

 

<br />

<%

 

 

-- works fine --%>

 

 

<div class="wrapper">

 

 

<div class="left_column">

left Collumn

 

 

</div>

 

 

<div class="right_column">

right Collumn

 

 

</div>

 

 

</div>

 

 

</div>

 

 

</form>

</

 

 

 

 

 

body>

</

 

 

 

 

 

html>

 

 

[Kate]

Hello Jason,

To position the div tags located in the ItemTemplate to the left and to the right you will need to set width to 100% to the outer elements of the ItemTemplate. Adding the following css class selectors you can achieve the desired appearance:

ul.rtbUL li.rtbTemplate
 {
     width: 100%;
 }
div.rtbInner ul.rtbUL
 {
     width: 100%;
 }

Kind regards,
Kate
the Telerik team