I'm a WPF guy and a bit lost when it comes to CSS.
I'd like to change the expander for igTree items to appear at the bottom of the tree item and change it from the triangle to say "Show replies..."/"Hide replies" based on its expansion state
I've gotten as far as finding the styles for the expander ui-igtree-expander ui-icon ui-icon-triangle-1-e/s. I've done some playing with them in the browser debug tools to know I need to change the position to remove the top and left attributes and add in a bottom attribute to ui-igtree-expander. But I'm lost as to how to actually apply these changes and change the expander icon to the text I want so it only occurs for the igTree on the particular page I am working on. I use the igTree elsewhere and don't want the styles to change there.
I'd appreciate any help you can give.
Hello,
Thank you for the details shared!
1)In order to change the triangle(or custom img) location to be displayed at the bottom instead of the top of the list item, I suggest simply replacing the top with bottom css attribute. In order to see this change in real time, I advise you to use the browsers DevTools and directly apply the changes there, so you could see in real time what the outcome will be. For example: 1-open browser’s dev tools
2-Right click on a triangle element to select\inspect the span it is rendered in
3-apply the top-bottom changes:
.ui-igtree-expander {
1. position: absolute; 2. left: .8em; 3. /* top: .8em; */ 4. bottom: .8em; 5. margin-top: -8px; 6. margin-left: -8px; 7. width: 16px; 8. height: 16px; }
2)The triangle image used is residing in icons sprite located in the images folder with the path of : images/ui-icons_888888_256x240.png. I suggest the easiest change will be to create a corresponding image for the collapsed and expanded state. To achieve this, first create/obtain the required images. Then modify the css classes involved. This could be either overriding the existing css classes, or directly modify these in the Infragistics.css file. When modifying CSS it is always good to be aware of the css styles applied by default. You could get a detailed list of these here à http://help.infragistics.com/jQuery/2015.2/ui.igtree
ui-icon ui-icon-triangle-1-e - Classes defining the css sprite icon for expanded node. ui-icon ui-icon-triangle-1-s - Classes defining the css sprite icon for collapsed node.
I am attaching a sample illustrating this approach overriding the existing css styles applied. This will apply the change to all igTree widgets used. The relevant code snippet for the code involved is: <style>
.ui-igtree-parentnode { padding-left: 6.5em !important; } .ui-igtree-expander { position: absolute; left: .8em; /*top: .8em;*/ bottom: .8em; margin-top: -8px; margin-left: -8px; width: 102px; height: 16px; } .ui-igtree-node .ui-icon-triangle-1-s { background-image: url("igTree_CustomImgs/HideReplies.png") ; background-position: left center ; background-repeat: no-repeat ; } .ui-igtree-node .ui-icon-triangle-1-e { background-image: url("igTree_CustomImgs/ShowReplies.png") ; background-position: left center ; background-repeat: no-repeat ; }
</style>
You could use this or a similar implementation.
Additionally, it should be possible to achieve a similar functionality using CSS content property ( details and illustrative sample ) and inserting the text required. For more details - Using css for text: http://stackoverflow.com/questions/2741312/using-css-to-insert-text
Please let me know how my suggestions work for you!