Please view the image below. I have a menu styled with the Claymation AppStyleSet and custom images (the exclamation icons). I would like to get the Child Menu items (in this example under Step 1) to be moved further left to align under the Parent menu title as shown. I've had no luck figuring out what elment in the ig_tree css file to use, but surely this can be done. Any help pointing me in the right direction would be greatly appreciated.
Hello Daryl,
Looking at your Claymation CSS file it appears that you are setting the important setting on the padding in theigdt_ClaymationNode CSS class. Have you tied setting it for the padding-left in the igdt_ClaymationNodeGroup CSS class?
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
Mike,
Was playing around and even though everything is igdt_Claymation(something) I did add the raw .igdt_NodeGroup you referenced and just copied what was in the igdt_ClaymationNodeGroup with the !important modification and viola! Thanks much for the quick help!
I figured out the important setting, been awhile since i've used that. Still it had no effect. This is the content of the claymation css file
.igdt_ClaymationControl{/** background-color:Transparent; */ background-color:whitesmoke; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; border:solid 1px Transparent; color:Navy;}.igdt_ClaymationControlActive{}.igdt_ClaymationControlDisabled{}.igdt_ClaymationDataLoadingContainer{}.igdt_ClaymationDataLoadingMessage{}/* //////////////////// GROUP STYLES //////////////////// */.igdt_ClaymationNodeGroup{ margin-left:1px; padding-left:1px; list-style: none;}.igdt_ClaymationNodeHolder{ white-space: nowrap;}.igdt_ClaymationNodeImage{ vertical-align: middle;}.igdt_ClaymationNode{ padding:1px 1px 1px 1px !important; line-height: 15px; cursor:hand; color:Navy; text-decoration:none;}.igdt_ClaymationNodeSpecial{ font-weight:bold; background-color: Khaki;}.igdt_ClaymationNodeRoot{ font-weight:bold;}.igdt_ClaymationNodeParent{}.igdt_ClaymationNodeSelected{ color:Red; background: Khaki;}.igdt_ClaymationNodeActive{ background-color:#EAEAEA; padding:0px 1px 0px 1px;}.igdt_ClaymationNodeHover{ text-decoration:underline;}.igdt_ClaymationNodeDisabled{ color:#CCCCCC;}.igdt_ClaymationInternalNodeEditor{ border:solid 1px #000000; padding-left:2px;}.igdt_ClaymationNodeHolder img{ vertical-align:middle;}
Hi Mike,
Thanks for the quick response. The ig_datatree css file has the .igdt_ClaymationNodeGroup and both the margin-left and padding-left are 0px. And I am not sure how to set the property to !important. Thanks.
The CSS file you are currently using is for the UltraWebTree since you are using the WebDataTree you will want to use the ig_datatree.css file to set CSS properties for the WebDataTree. In the ig_datatree.css find the igdt_NodeGroup and use the padding-left property. You will want to make this property as “!important” so it does not get overridden by the default inline style.
Please let me know if I may be of further assistance with this matter.