Select2 styling

[krysros]

There is some styling issues with select2 widget:

1. height - which is smaller than normal select or input
2. width - does not resize with the size of the window (related to Issues with responsive width select2/select2#3278)
3. does not includes validation styles for error
4. does not switch to next widget using tab on keyboard after selection of item

Example:

1. Change the size of the browser window
2. Refresh the page
3. Return to the previous window size

[mikmatko]

I think the main problem for

height - which is smaller than normal select or input
does not includes validation styles for error

is that the "form-control" class is not added to the correct element. This can be fixed with something like $('#select2-' + oid + '-container').addClass('form-control');
in the select2 template.

That and some styling tweaks should do it.

(Currently containerCssClass: 'form-control', is passed for the Select2 constructor, but it might be unnecessary. It adds the class to the "wrong" element.)

[mikmatko]

Came across these issues too.

To fix the styling issues I have used select2-bootstrap-theme from https://github.com/select2/select2-bootstrap-theme. Imho, deform should include this.

To fix the resizing issue set width: null, when initializing select2.

[stevepiercy]

@mikmatko I would accept a PR with your proposed changes.

[stevepiercy]

Also @krysros or anyone else, I would gladly accept a PR that fixes all these issues. Thanks for reporting and offering a solution.

[stevepiercy]

A PR to fix this can be done according to the version of Deform and Bootstrap.

• On Deform 2.0-branch, we use Bootstrap 3.x latest. Add https://github.com/select2/select2-bootstrap-theme
• On Deform master, we use Bootstrap 4.x latest. Add https://github.com/ttskch/select2-bootstrap4-theme

A PR for either should add what @mikmatko suggests. I'll do the forward/back-porting as needed.