Help in node template controls alignment

3 posts, 1 answers
  1. Francis Go
    Francis Go avatar
    12 posts
    Member since:
    Jul 2009

    Posted 14 Jul 2009 Link to this post

    Hello telerik team,

    I'm having trouble aligning my controls inside the node template. The desired look is node values are aligned left, while add/edit/delete controls are aligned right. But the thing is, the controls on the right should all be aligned the same way, regardless of the node's position in the hierarchy.

    I was able to do this under IE7 as:

    <div style="width:700px">                
            <telerik:RadTreeView runat="server" ID="RadTreeView1"> 
                <NodeTemplate>                     
                        <div style="text-align:left; width:20%; float:left"> 
                            <asp:Label ID="Label1"  isText="true" runat="server" Text='<%# Container.Attributes["Text"] %>' /> 
                        </div> 
                         <div style="text-align:right; width:80%; float:right"> 
                         <asp:LinkButton ID="lbtnAdd" runat="server" Text="Add" CommandName="Add" CssClass="Link" OnClick="lbtnAdd_Click"/>&nbsp;&nbsp; 
                         <asp:LinkButton ID="lbtnEdit" runat="server" Text="Edit" CommandName="Edit" CssClass="Link" OnClick="lbtnEdit_Click"/>&nbsp;&nbsp; 
                                    <asp:LinkButton ID="lbtnDelete" runat="server" Text="Delete" CommandName="Delete" CssClass="Link"  OnCommand="lbtnDelete_Click"/> 
                        </div> 
                </NodeTemplate> 
            </telerik:RadTreeView> 
        </div> 

    But unfortunately, this doesn't work at all in IE8 or Mozilla. I'm guessing it's the percentage values on the div widths. The problem is, when I supply fixed widths on the divs, they are right aligned depending on the node's level.

    Do you guys have a ready made sample to achieve this under IE8? Or perhaps a different approach.

    TIA



  2.
  3. Answer
    Yana
    Admin
    Yana avatar
    5043 posts

    Posted 15 Jul 2009 Link to this post

    Hi TIA,

    Please add the following css style to your page and let us know how it goes:

    .RadTreeView div.rtIn {  
      width:100% !important;  
    } 

    All the best,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Francis Go
    Francis Go avatar
    12 posts
    Member since:
    Jul 2009

    Posted 15 Jul 2009 Link to this post

    That worked perfectly! Thanks guys.
Back to Top