Single Select possible?

[skyynet]

Yes, I'm aware, that this is a Multi-Select plugin. After implementing it into my design, it would nevertheless be great, to use it as single select. I'm pretty sure it's either already possible or easy to add.

[andreww1011]

See v1.4.0.

[skyynet]

Thanks a lot. This basically works. I just have an issue with my applied CSS.

I defined

.filter-multi-select { counter-reset:nitems; }
.filter-multi-select > .viewbar > .selected-items > .item:nth-child(n+2) { counter-increment:nitems; visibility:hidden; width:0; padding:0; border:0; margin:0; }
.filter-multi-select > .viewbar > .selected-items > .item:nth-child(1) ~ .item:last-child::before { position:absolute; visibility:visible; content:"+" counter(nitems); color:black; }

This also seems to be applied to the single select ones.

How can I apply this CSS only to the multi select ones?

[andreww1011]

See v1.4.1.

You can now target the multiple attribute on the root div, e.g.

• .filter-multi-select[multiple] for any multiple select.
• .filter-multi-select[multiple=""] for a multiple select with no selection limit.
• .filter-multi-select[multiple="n"] for a multiple select with a selection limit of n.
• .filter-multi-select[single] for a single select.

[skyynet]

Thanks for the update. I just can't get it to work. I've defined:

.filter-multi-select[multiple=""] { counter-reset:nitems; } .filter-multi-select[multiple=""] > .viewbar > .selected-items > .item:nth-child(n+2) { counter-increment:nitems; visibility:hidden; width:0; padding:0; border:0; margin:0; } .filter-multi-select[multiple=""] > .viewbar > .selected-items > .item:nth-child(1) ~ .item:last-child::before { position:absolute; visibility:visible; content:"+" counter(nitems); color:black; } This should only be applied to the multi-selects but is also applied to the single-selects. I tried [multiple] and [multiple=""]. Both should not be applied to the single-selects but do. I still see a 0/1 for single selects.

I also experience a problem (also with v1.4) that boosts the height of the multi-select field, when more than 1 item is selected.

The code for the 3G single-select is

<div class="hf_3 hf_multiselect"><select name="s_umts[]" id="umts">
 <option value="1">Ja</option>
 <option value="2">HSDPA</option>
 <option value="3">HSDPA HSUPA</option>
 <option value="4">HSPA+< /option>
</select>
</div>

Its JS is

var umts = $('#umts').filterMultiSelect({
    selectAllText: 'alle',
    placeholderText: 'wählen',
    filterText: 'Suche',
    labelText: '3G',
});

Any hints? This is the last issue before I can publish the whole form to my website, which will improve the user experience a lot.

[andreww1011]

Regarding the "0/1": this is a selection counter. It shows how many are selected (0) out of maximum allowed (1). It is displayed when the number that can be selected is limited, either by creating a single select or by passing selectionLimit to the plugin. It is a graphical cue to the user that some, not all, can be selected. To hide it, use the following:

.filter-multi-select > .viewbar > span:nth-child(2) { display: none; }

To prevent the field from increasing in height, add the following. This also clips any that don't fit.

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

To keep the "+1" from getting clipped (e.g. if the item name is really long or the box is not wide enough), add:

.filter-multi-select > .viewbar > .selected-items > .item:nth-child(1) ~ .item:last-child {
    position: sticky;
    right: 0.75rem;
    z-index: 100;
}

To add a white fade under the "+1" so it remains visible, add:

.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]

Thanks!!!

I understand the idea behind the display of 0/1 for single-select fields. The best solution would be to show radio-buttons instead of squares for the single select drop-downs, as this is learned for a long time and doesn't need explanation. I fear, this is more complicated to implement, as filter-multi-select was programmed with multi-select in mind. I now suppress the display of the 0/1.

I don't know why, but the code to limit the height of the line for multi-select didn't work for me. As you pointed out the according css element to me, I was able to add a max-height:35px; to it which now works, to limit the height. Only the counter still moves down for some selections. Not for all, but only some:

I've uploaded the form today, as it's nearly perfect. See Skyynet Handy Finder