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:
It's not doing anything unless I add float:right to the igdt_Node class. Then it does the wrap but then the text appears under the checkbox instead of besides it.
Let me know if I may be of further assistance.
I'm still stuck on this issue.
The images you talk about are from the Claymation theme.
This is the markup and css:
<li class="igdt_ClaymationNodeHolder" id="x:1561107225.4:adr:0.0" adr="0.0">
<img alt="Expand 2014_IMU_Act_1.1" src="../ig_res/Claymation/images/igdt_Plus.gif" idx="1" nidx="1">
<img id="x:1561107225.5:mkr:check" alt="" src="../ig_res/Claymation/images/ig_checkbox_off.gif" mkr="check">
<a tabIndex="-1" class="igdt_ClaymationNode igdt_ClaymationNodeParent igdt_ClaymationNodeActive" id="x:1561107225.6:mkr:dtnContent" onclick="{return false;}" href="#" mkr="dtnContent">2014_IMU_Act_1.1</a><ul class="igdt_ClaymationNodeGroup" style="padding-left: 20px; display: none;">
.igdt_ClaymationNodeHolder img {
display: table-cell;
vertical-align: top;
vertical-align: middle;
}
.igdt_ClaymationNodeHolder {
white-space: nowrap;
clear: left;
.igdt_ClaymationNodeGroup {
list-style: none;
margin-left: 0px;
padding-left: 0px;
.igdt_ClaymationControl {
background-color: transparent;
border: 1px solid transparent;
color: #000000;
font-size: xx-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
.igdd_ClaymationListItem a:link {
color: #333333;
text-decoration: none;
.igdt_ClaymationNodeHolder a {
padding-top: 5px;
white-space: pre-wrap;
font-size: 11px !important;
font-weight: normal !important;
font-family: Verdana, sans-serif;
This is what it looks like:
How can I make the imgs and content to show in one row?