Add border to the 10th option/value in dropdownsearch widget

saravanakumar v

Solved

Question

Hi All

I need to add a bottom border to the 10th option/value in dropdownsearch widget. we have top 10 list and bottom list in the same dropdown. we want to separate the top list from the bottom list by a border

Kindly provide your valuable suggestion

Thanks

Kumar

15 Aug

Mihai Melencu

Champion

Solution

Hi @saravanakumar v ,

You can use the following CSS:

.top-list-dropdown-popup.vscomp-option[data-index="9"] {
border-bottom: 1px solid red;
}

The reason we use the index 9 is because data-index is zero-based, so 9 is the tenth option.

In order to apply it properly you need to use SetVirtualSelectConfigs > additionalClasses in the OnInitialize event of the dropdown search and add the class name top-list-dropdown-popup .

I attached an OMl with the implementation as well.

DropdownSearchBorder.oml

15 Aug

1 reply

17 Aug

Show thread

Hide thread

saravanakumar v

Thanks Mihai.

17 Aug

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines