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,
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.
Hi Parthi,
I'm just checking if you need any further assistance with the matter.
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,
Thank you for the update.
If you have any other questions regarding the matter, please do not hesitate to ask.