Enahncement Request: Option to display only x options with +n for huge option lists

[skyynet]

While everything works great for small option lists, the layout will break for huge ones.
I have a multi selector for >200 cellphone brands. Even with 4 entries, it will break the layout

It would be great to have an option to show only x entries and if more are selected, e.g. for x=1 show n1 n2 n3 +33.

[andreww1011]

I would handle that with CSS. Try adding the following:

.filter-multi-select { 
	counter-reset: nitems;
}

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(n+4) {
	counter-increment: nitems;
	visibility: hidden;
	width: 0;	
	padding: 0;
	border: 0;
	margin: 0;
}

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(3) ~ .item:last-child::before {
	position: absolute;
 	visibility: visible;
	content: "+" counter(nitems);
	color: black;
}

[skyynet]

Wow. I didn't know this was possible with CSS. Works great as intended.

Would it be possible to limit the number of items according to their actual lengths?

e.g. for ABB AEG AGM Amplicomms GeneralDynamics
show ABB AEG AGM +2
but GeneralDynamics +4

Otherwise, I would have to limit the number of shown entries by the length of the longest entry.

Why don't you add a "Sponsor me" button? I really appreciate your plugin and would like to show this.

[andreww1011]

I would still try to handle that with css. There's no way in css (that I know of) to dynamically change the limit based on the lengths. The following css sticks the number of hidden entries to the right. There's still the case where items may be clipped if they are really long, but hopefully you can work that out.

.filter-multi-select { 
	counter-reset: nitems;
}

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(n+4) {
	counter-increment: nitems;
	visibility: hidden;
	width: 0;	
	padding: 0;
	border: 0;
	margin: 0;
}

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(3) ~ .item:last-child::before {
	visibility: visible;
	content: "+" counter(nitems);
	color: black;
}

.filter-multi-select > .viewbar {
	white-space: nowrap;
	overflow: hidden;
}

.filter-multi-select > .viewbar > .selected-items {
	width: inherit;
	display: inline-block;
}

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(3) ~ .item:last-child {
	position: sticky;
	right: 0.75rem;
	z-index: 100;
}
 
 .filter-multi-select > .viewbar::after {
	visibility: visible;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.70) 40%, white 70%);
	content: "";
	position: absolute;
	right: 0;
	width: 100px;
	height: 100%;
	box-sizing: border-box;
	top: 0;
	padding: 0.375rem 1px;
	background-clip: content-box;
	pointer-events: none;
}

[skyynet]

Unfortunately this doesn't work for me:

instead of the version before with child(n+2)

I think, I just stick with the old one. Works and looks ok.