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
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?
Let me know if I may be of further assistance.
This is happening because the custom CSS styles that we've added if you want you can inspect the elements and try to align them. As I see there are two image and one 'a' element.
Hope that helps.
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.