Question 303840 in Html Question posted in
Some basic documentation can be found here.

Html – Change direction of mat-tree UI line border bottom issue design angular

mat tree changes direction from right to left. The bottom border needs to be removed refer to the Image
enter image description here https://stackblitz.com/edit/material-tree-nested-sndfhl?file=app%2Fapp.component.css

Tags:

2

Answers


  1. 0

    When you open your tree items than your current css effecting, Please add below scss in styles.scss

    mat-nested-tree-node{
  &[aria-expanded="true"]{
   & > li {
          border-bottom: none;
      }
  }
}

    or simply add below css in your component’s .css file

    mat-nested-tree-node[aria-expanded="true"] > li {
  border-bottom: none;
}
    Login or Signup to reply.
  2. 0

    For solve your problem I have added the below new css class:

    li.example-tree-container {
  border-bottom: none;
}

    In the below css class I have made the border 2px. this class already exist in your stylesheet please find it and make 2px border size.

    li[_ngcontent-c0] ul[_ngcontent-c0]{
  border-top: 2px dotted gray; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search