Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1965
WebDataTree - Alignment and Style Issues
posted

HI,

The tree-Minus icon of my Web Data Tree (v12.1) appears slightly below my node text and looks misaligned and also the long texts of the few nodes appear below the tree-minus icon since there is no word wrap. PFA the screen shot of my tree.

This expands everything but i want only the root node to be expanded not any of the childs.

    <style type="text/css">
        .style1
            {
                width: 10%;
            }
            .style2
            {
                height: 10;
                width: 10%;
            }
            .labelStyle
            {
                font-family:Verdana;
                font-size:10px;
                vertical-align:top;
            }
            .texBoxStyle
            {
                font-family:Verdana;
                font-size:9px;
                height:16px;
                vertical-align:top;
            }
            .buttonStyle
            {
                Font-Size:8pt;
                Width:60px;
                font-family:Verdana;
                text-decoration:none;
            }
           
             .parent
            {
              font-weight:bold;
              color:Black;
              text-decoration:none;
              vertical-align:bottom;
              white-space:normal;
            }
           
            .child
            {
                color:Blue;
                text-decoration:none;
                 vertical-align:bottom;
                 white-space:normal;
            }
           
            .selhover
            {
             color: Aqua;
             text-decoration:none;
             background-color:White;
            }
           
       </style>

 

<ig:WebDataTree ID="uwtGroups" runat="server" Width="100%" Height="100%"
 Font-Names="Verdana" Font-Underline="false"
  Font-Size="9px"  ExpandImageToolTip="ig_treePlus.gif" NodeIndent="20"
    BackColor="Transparent" SelectionType="Single" EnableExpandImages="true"
    CollapseImageToolTip="ig_treeMinus.gif" BorderStyle="None"  
DragDropSettings-DragDropMode="Default"  DragDropSettings-AllowDrop="true"
OnSelectionChanged ="uwtGroups_SelectionChanged" AutoPostBackFlags-SelectionChanged="On"
 onnodeclick="uwtGroups_NodeClick" AutoPostBackFlags-NodeClick="On">
 <DragDropSettings AllowDrop="true" DragDropMode="Default"></DragDropSettings>
<NodeSettings NodeParentCssClass="parent" CssClass="child" 
 SelectedCssClass="selhover" HoverCssClass="selhover" />
 </ig:WebDataTree>

 

Thanks,

Parthi

Parents
No Data
Reply
  • 37874
    posted

    Hello Parthi,

    I would suggest you to add line-height: 20px; to .child class. Now the text and the expand icon should be aligned. If the text is too long, a scrollbar will appear or it will continue on the next line if it does not fit the width of the grid.

    Let me know if you have any further questions.

Children