ToolBar itemtemplate not showing divs correctly

2 posts, 0 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    Feb 2008

    Posted 10 Aug 2011 Link to this post

    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>

     

     

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top