search

Pylons / deform

A Python HTML form library.
Other
417 stars 162 forks source link

Select2 styling #328

Open krysros opened 7 years ago

krysros commented 7 years ago

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 https://github.com/select2/select2/issues/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

select2

mikmatko commented 7 years ago

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 commented 7 years ago

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 commented 4 years ago

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

stevepiercy commented 4 years ago

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

stevepiercy commented 4 years ago

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

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