jQuery UI Widgets Forums Navigation Tree Arrow background color and list width.

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  admin 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Arrow background color and list width. #121267

    pepe
    Participant
    Good evening, I am trying to do two things and I can't do it:
    
    1.- I want the mouse over the arrow that expands and contracts the list to change the background color.
    
    2.- As to the items in the list, I apply a background color when displaying the list on the left side. I would like it to be symmetrical. 
    
    All the best
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jQuery Tree Sample</title>
    	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="./../jqwidgets/styles/jqx.office.css" type="text/css"/>
    	<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        	<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        	<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        	<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        	<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
            
        	<script type="text/javascript">
            $(document).ready(function () {
    
                $('#jqxTree').jqxTree({ 
    				height: '500px', 
    				width: '300px',
    				theme: 'office',
    				toggleMode: 'click'
    			});
                
    			$('#jqxTree').bind('select', function (event) {
                    var htmlElement = event.args.element;
                    var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                    alert(item.label);
                });
    			
            });
        	</script>
        
       		<style>
    			.jqx-tree-item  {
    				background-color: #e8e8e8;
    				margin-left: 1px;
    				width: 200px;
     			}
    			
    			.jqx-tree-item-li ul{
    				padding-left: 17px;
    			}
    			
    			.jqx-tree-item-arrow-expand, .jqx-tree-item-arrow-collapse {
    				height: 24px !important;
    				width: 15px !important;
    				background-color: #dcdcdc !important;   
    				margin-top: 0px !important;
    				margin-left: 4px;
    			}	
    		
    			.jqx-tree-item-hover, .jqx-tree-item-selected {
    				background-color:#EBF1BE;
    				border-color: #EBF1BE;
    			}		
    		
    			.jqx-tree-item-arrow-expand-hover {
    			
    			}		
    
    			.jqx-tree-item-arrow-collapse-hover {
    
    			}
    
    			.a{
    				float:left; 
    				background-color: #dcdcdc; 
    				width:15px; 
    				height:24px; 
    				margin-top: 0px;
    				margin-left: 4px;
    			}		
    				
    			.b{
    				float:left; 
    				background-color: #dcdcdc; 
    				width:15px; 
    				height:24px; 
    				margin-top: 1px;
    				margin-left: 3px;
    			}			
    		
    		</style>
    </head>
    
    <body>
        <div id='jqxTree'>
            <ul>
                <span class="a"></span><li item-selected='true' style="margin-top: 5px;">Home
                <li item-expanded='true'>Item 1       
                  </ul><ul>
                      <span class="b"></span><li>SubItem 1.1</li>
                      <span class="b"></span><li>SubItem 1.2</li>
                      <span class="b"></span><li>SubItem 1.3</li>
                      <span class="b"></span><li>SubItem 1.4</li>
                  </ul>
                
              	<li >Item 2                       
                	<ul style="width: 300px">
                    	<span class="b"></span><li>SubItem</li>
                        <span class="b"></span><li>SubItem</li>
                        <span class="b"></span><li>SubItem</li>
                        <span class="b"></span><li>SubItem</li>
                        <span class="b"></span><li>SubItem</li>
                        <span class="b"></span><li>SubItem</li>
                   	
              	
                <span class="b"></span><li>Item 3</li>
            
        </div>
    </body>
    </html>
    Arrow background color and list width. #121294

    admin
    Keymaster

    Hi Pepe,

    In order to change the arrow background, you can use CSS. For example, in our themes we define the arrow with an icon and to change it’s background you can set the color CSS property.

    .jqx-tree-item-arrow-expand-light:after {
        content: var(--jqx-icon-arrow-up);
        color: red;
        margin-left: 2px;
    }

    In the older themes we used images i.e to change the arrow background, you will need to define a new arrow image. I would suggest using the approach with Font Icons, which we applied in the newer themes.

    As for the second question. In order to apply a color to a tree item, you should edit a CSS class .jqx-tree-item-themename.

    Example:

    .jqx-tree-item-light {
       background: red;
       color: white;
    }

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.