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

Stop selection from overflowing? #22

Open
jamols09 opened this issue Aug 23, 2021 · 1 comment
Open

Stop selection from overflowing? #22

jamols09 opened this issue Aug 23, 2021 · 1 comment

Comments

@jamols09
Copy link

How do I stop the selected option from overflowing. If I select more filter that will have a total of more than the fields width. Id like it to show on the placeholder "3 filters selected" or something like that

image

Or probably something like this will do
image

@desislavsd
Copy link
Owner

desislavsd commented Aug 29, 2021

Well you can control the wrapping via CSS. Notice that .v-select-bar has flex-wap: wrap applied.

There are multiple ways to achieve the design in the image depending on how ambitious you are about the end UX.
For example you can use the slots for the tags and v-show to hide the extra ones. Or use CSS like:

.v-select-selected:nth-child(n+4) {
    display: none !important;
}

The idea of the component is to be hackable. So understanding the docs and the way it works is vital for unlocking its true potential.

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

No branches or pull requests

2 participants