Arrow background color and list width. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Tree

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

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

Author

Arrow background color and list width. Posts

December 26, 2021 at 11:13 pm 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>

December 30, 2021 at 9:39 am 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/

Author

Posts

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

You must be logged in to reply to this topic.