question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tree] hope to can hide the icon on leaf

See original GitHub issue

What problem does this feature solve?

hide the icon on leaf

What does the proposed API look like?

add a props like hideLeftIcon

Now

image

Hope it will be

image

We added some styles to hide it

.ant-tree-show-line .ant-tree-switcher.ant-tree-switcher-noop:after{
  content: ' ' !important;
  width: 1px !important;
  border-left: 1px solid #d9d9d9 !important;
  height: 100% !important;
  position: absolute !important;
  left: 12px !important;
}
.ant-tree-show-line .ant-tree-switcher.ant-tree-switcher-noop:before{
  content: ' ';
  width: 16px;
  border-bottom: 1px solid #d9d9d9;
  height: 38%;
  position: absolute;
  left: 12px;
}

.ant-tree-show-line > li:last-child >  .ant-tree-switcher.ant-tree-switcher-noop:before{
  display: block;
  content: ' ' !important;
  width: 16px !important;
  border-left: 1px solid #d9d9d9 !important;
  border-bottom: 1px solid #d9d9d9 !important;
  height: 38% !important;
  position: absolute !important;
  left: 12px !important;
}


.ant-tree-show-line .ant-tree-child-tree  > li:last-child >  .ant-tree-switcher.ant-tree-switcher-noop:before{
  display: block;
  content: ' ' !important;
  width: 16px !important;
  border-left: 1px solid #d9d9d9 !important;
  border-bottom: 1px solid #d9d9d9 !important;
  height: 38% !important;
  position: absolute !important;
  left: 12px !important;
}

.ant-tree-show-line > li:last-child >  .ant-tree-switcher.ant-tree-switcher-noop:after{
  display: none !important;
}

.ant-tree-show-line .ant-tree-child-tree  > li:last-child >  .ant-tree-switcher.ant-tree-switcher-noop:after{
  display: none !important;
}

But here is too many important, so we hope to provide an option to hide icon

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
huiyaopuahcommented, May 10, 2021

This will do it.

showline={{ hideLeafIcon: true }}

2reactions
ChambreNoirecommented, May 18, 2020

The provided css (including the sandbox referenced on the website) doesn’t work in v4.2.4…

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I hide leaf hints on my Ancestry family tree?
Having added this rule, all the hint icons will magically disappear, but only until you next reload the page! So you may need...
Read more >
How to hide the default arrow icon of af:tree node — oracle-tech
I want to hide the arrow icon which is displayed by default with af:tree node. The use case is to display custom icons...
Read more >
how to change the icon of leaf node in dojo tree?
I have created a tree containing information about server and its VMs. I want to change the icon of VM to green if...
Read more >
Linux tree command help and examples - Computer Hope
Linux tree command information, examples, and help.
Read more >
The sick, dirty-dead-squirrel-hiding truth about leaves
Hi, my name is Amelia, and I hate leaves. ... I just don't trust them after they fall off the tree. ... Don't...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found