Tree Listing CSS Problem (solution)

  • Resolved kinggeneral

    (@kinggeneral)


    6 years, 10 months ago

    Take example you take widget such as woocommerce category
    and want to show its hierarchy.

    CSS problem will appear :
    – the parent and its child is in the same line, and NOT get padding like a tree.

    i use this trick to solved that issue : (this css will add symbol before <li>)

    .widget_product_categories ul li:before {
	font-family: "FontAwesome";  
	content: "\f054";
	color: #eeb500;
	margin-right: 5px;
}

    maybe dev have better fix than this one.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author canyonthemes

    (@canyonthemes)

    6 years, 10 months ago

    Hello kinggeneral,

    At first thank you so much for finding issue, Currently its showing Parent and child in a same line, we will fix this issue in our update version.
    Your css is fine but that is a bit incomplete. Please i have added css below, you can check it.
    ——————————————–

    .widget_product_categories ul li .children li:before {
	font-family: "FontAwesome";  
	content: "\f054";
	font-size:10px;
	color: #eeb500;
	font-weight:400;
	margin-right: 5px;
} 

.widget_product_categories ul li .children {
    margin-left:15px;
   
}

.widget_product_categories ul li a{
 font-weight: 600;
}
.widget_product_categories ul li .children li a {
    font-weight: normal;
}

.widget_product_categories ul li .children li:last-child {
    border-bottom: none;
}

    Thank you,

    Thread Starter kinggeneral

    (@kinggeneral)

    6 years, 10 months ago

    this works well for me.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Tree Listing CSS Problem (solution)’ is closed to new replies.