select2tokenizer

Since V1.1.0

Select2Tokenizer is a component which allow the user to select multiple values as 'tokens' from a search field. The component is implemented on top of the Select2 library.

Content under construction

Table of contents

Styling Select2Tokenizer

The component has it's own CSS selector to be used for the restyle of the component. Note that fine-grained styling of the component is depending on the internal selectors of the select2 libary

element selector
summary

.svy-select2-autotokenizer

style the select2tokenizer

.svy-select2-autotokenizer-container

style the select2tokenizer tags container

.svy-select2-autotokenizer-dropdown

style the select2tokenizer dropdown

Sizing

To adjust the Select2Tokenizer size, apart from stylying the component with your own CSS, you can use one the control size classes; the Select2Tokenizer offers 4 control size classes. Please note that each size class requires a certain height of the component for nice stylying and to avoid vertical scrollbars. To use the size classes just add one of them into the component's styleClass property. Default size class is select2-sm.

size class
min-height
font-size

select2-xs

20px

12px

select2-sm

32px

14px

select2-md

36px

16px

select2-lg

44px

18px

Select2Tokenizer Properties

Select2Tokenizer properties can be found here.

Select2Tokenizer Events

Select2Tokenizer events can be found here.

Select2Tokenizer API

Select2Tokenizer API methods can be found here.

The following articles are recommended for additional reading

Last updated