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
Hello Parthi,
Thank you for the update.
If you have any other questions regarding the matter, please do not hesitate to ask.
Nikolay,
I have added two new CSS and fixed it as follows.
.holder
{
vertical-align:middle;
padding-bottom:0px;
padding-top:0px;
}
.holder img
<NodeSettings HolderCssClass="holder" NodeParentCssClass="parent" SelectedCssClass="selhover" HoverCssClass="selhover" />
Thanks for the help,
Hi Parthi,
I'm just checking if you need any further assistance with the matter.
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.