Display Tree item with multiple lines?

Ignition
1

I want to be able to make a Tree's item expand to show multiple lines, as in the below. I'm using the Tree as a sort of debugger which shows errors, but without multiple lines it's a bit useless...

image
image856×136 8.21 KB

2

Something like this?

.tree-item {
    height: fit-content !important;
}
.tree-item-label {
    height: fit-content !important;
    flex: unset !important;
}
.text-scroll{
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}
2 Likes
3

I edited to this:

.tree-item {
    height: fit-content !important;
    padding: 4px 0px; /*added this*/
}
.tree-item-label {
    /*height: fit-content !important;*/
    flex: unset !important;
    flex-wrap: nowrap; /*added this*/
}
.text-scroll{
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}

But this worked great, thanks as always @victordcq :slight_smile:
image

(if you edit your post to that (without the comments ofc) i'll mark your post as the solution - as is though it looked a bit funny with the labels pushed up to the top of the row container rather than in the vertical centre)

1 Like
4

I'd much rather the bullet lead my eye to the first line of the item content.

1 Like
5

I think the bullet was in the centre and the rest of the content was shunted to the top.

I would have to move the line joining the bullet if I wanted to move the bullet to the top, which sounds hard!!

Maybe it's not so hard...

1 Like
6

image

Crap, just noticed the last item is bogus... ah, cause it's the last one and it's put at the end of the vertical stick... ehh, I can live with the last one looking strange

/* edits to the Tree component to display long text on multiple lines */
.tree-item {
    height: fit-content !important;
    padding: 4px 0px;
}
.tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap;
}
.text-scroll{
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}

.tree .tree-alignment.terminal-alignment .cross-alignment{
	height: 0.75rem
}


.tree .tree-item-label .label-wrapper{
	align-items: start;
}
3 Likes
7

ah i was bussy looking at it too :stuck_out_tongue:
you can use .terminal-alignment.last-child for the last one

.tree-item {
    height: fit-content !important;
    padding: 4px 0px;
}
.tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap;
}
.text-scroll{
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}

.tree .tree-alignment.terminal-alignment .cross-alignment{
	height: 0.75rem
}


.tree .tree-item-label .label-wrapper{
	align-items: start;
}

.terminal-alignment.last-child{
    height: 0.75rem !important;
}

image

3 Likes
8

I moved to px like your original last post (before edits) as the 0.75rem stopped working for me after the other bits and pieces, so I'm at this:

.tree-item {
    height: fit-content !important;
    padding: 4px 0px; /*added this*/
}
.tree-item-label {
    /*height: fit-content !important;*/
    flex: unset !important;
    flex-wrap: nowrap; /*added this*/
}
.text-scroll{
    padding-top:2px;
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}
.label-wrapper-icon {
    display: block !important;
    padding-top: 4px;
}
.terminal-alignment.last-child{
    height: 16px !important;
}
.terminal-alignment .cross-alignment{
    height: 16px !important;
}

.tree .tree-item-label .label-wrapper{
	align-items: start;
}

image
image674×593 17.8 KB

Thanks again!! Where there's a will, there's Victor with a hammer and a sledge hammer if the hammer doesn't work :slight_smile:

2 Likes
9

ah i didnt get it up pixel perfect so i just too your values (but seems you found the correct px values :stuck_out_tongue: )

2 Likes
10

yep, you had 14px, I went to 16 and it looked good! haha. Nothing like beating it til it conforms :confused:

2 Likes