Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal scrollbar for NTree #2875

Closed
ouuan opened this issue Apr 30, 2022 · 11 comments
Closed

Horizontal scrollbar for NTree #2875

ouuan opened this issue Apr 30, 2022 · 11 comments
Labels
feature request New feature or request

Comments

@ouuan
Copy link
Contributor

ouuan commented Apr 30, 2022

This function solves the problem (这个功能解决的问题)

When the tree is too wide, it's inconvenient to see the rightmost part.

And I failed to come up with a solution using NScrollbar because the width of an NTree is the width of its parent node instead of its real width.

Expected API (期望的 API)

<n-tree scroll-x /> to add a horizontal scrollbar for the tree when it's too wide.

@github-actions github-actions bot added the feature request New feature or request label Apr 30, 2022
ouuan added a commit to ouuan/codle that referenced this issue May 1, 2022
This is an ugly hack that uses JavaScript to calculate related widths.

I've opened an issue to request horizontal scrollbar for NTree:
tusen-ai/naive-ui#2875
@07akioni
Copy link
Collaborator

07akioni commented May 4, 2022

image

@07akioni 07akioni closed this as completed May 4, 2022
@ouuan
Copy link
Contributor Author

ouuan commented May 5, 2022

It seems that the scrollbar only works when a single label is too long, but not when the tree is too deep.

@ouuan
Copy link
Contributor Author

ouuan commented May 5, 2022

@ouuan
Copy link
Contributor Author

ouuan commented May 7, 2022

So now it's not a feature request for a horizontal scrollbar, but a bug with the width of an NTree. Should I open a new issue for it?

@07akioni
Copy link
Collaborator

07akioni commented May 8, 2022

So now it's not a feature request for a horizontal scrollbar, but a bug with the width of an NTree. Should I open a new issue for it?

I haven't found the reason why tree node's width is incorrect. Discuss it in current issue is enough.

@07akioni
Copy link
Collaborator

07akioni commented May 8, 2022

It's quite wired, emmmmm.

@07akioni
Copy link
Collaborator

07akioni commented May 8, 2022

I've found the solution.

@07akioni
Copy link
Collaborator

07akioni commented May 8, 2022

If you need to fix it now, use the following workaround.

.n-tree-node-indent::before {
  content: "";
  display: block;
  width: 16px;
}

@ouuan
Copy link
Contributor Author

ouuan commented May 11, 2022

Now when virtual scroll is enabled and NScrollbar is used, we need to scroll to the rightmost to see the vertical scrollbar. We need to either accept this behavior or use non-virtual scroll instead. NDataTable now supports virtual scroll with a horizontal scrollbar, it would be better if NTree can also support it.

@07akioni
Copy link
Collaborator

If we try to support it, scrollx must be specified.

@mhrmsg
Copy link

mhrmsg commented Nov 21, 2024

image
I encountered the same issue while using TreeSelect. Is there a solution for it now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants