Hi,
I'm using a WebDataTree (Infragistics4.Web.v12.1) inside a WebDropdown like this:
<ig:WebDropDown ID="wddTree" runat="server" Width="170px" DropDownContainerWidth="200px" StyleSetName="Claymation" EnableCustomValues="true" EnableCustomValueSelection="true" DisplayMode="DropDown">
<ClientEvents Initialize="wucpcDropDown.initializeDropDown" />
<Items>
<ig:DropDownItem TemplateId="TmpID" HoverCssClass="igdd_itemhover" ActiveCssClass="igdd_itemhover" SelectedCssClass="igdd_itemhover" CssClass="igdd_itemhover"></ig:DropDownItem>
</Items>
<Templates>
<ig:ItemTemplate TemplateID="TmpID">
<Template>
<ig:WebDataTree ID="WebDataTree1" runat="server" CheckBoxMode="TriState" StyleSetName="Claymation">
<ClientEvents NodeExpanded="wucpcDropDown.setFocus" NodeCollapsed="wucpcDropDown.setFocus" NodeChecking="wucpcDropDown.nodeChecking" Initialize="wucpcDropDown.initializseTree" NodeCollapsing="wucpcDropDown.nodeCollapsing" NodeClick="wucpcDropDown.nodeClicking" />
</ig:WebDataTree>
</Template>
</ig:ItemTemplate>
</Templates>
</ig:WebDropDown>
My problem is when one item is too long, without spaces like this:
>All
>012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
>Item 1
>Item 2
The text expands and a horizontal scroll bar appears. When this happens, there is another side effect. If you open the dropdown and use the horizontal scroll bar, it will keep the focus, and if after this you open another WebDropDown, the first one won't close, resulting in two open dropdowns unless you close the first one manually.
Is there a way to make the nodes "wrap" so this wont happen?
Thanks
Hello,
Thank you for contacting us.
About your question, my suggestion is to override our CSS classes in order to change the white-space and text-wrap attributes. Modify them like this and let me know about the results.
Code snippet: