Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set custom height & width for select enhanced with selectize.js jquery plugin?

I'm using https://github.com/brianreavis/selectize.js in a project and I'm not able to customize the height and width of the select input:

  • modifing the select via css not works
  • there is not height / width options in https://github.com/brianreavis/selectize.js/blob/master/docs/api.md

The problem is aggravated because the standard select / text input (using bootstrap 2) is 30px height, and with this plug-in it grows to 37px and breaks very bad the visual of my user interface (growing all inputs to 37px is certainly not an option).

I've also included the selectize.bootstrap2.css file with no luck.

like image 742
pragmatic_programmer Avatar asked Mar 20 '14 21:03

pragmatic_programmer


People also ask

How do I change the selection height?

All you have to do is add inline-style in the select tag.

How do I set auto height in CSS?

Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.

How do I make my screen 100% height?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.


1 Answers

selectize.js customization for 30px height

.selectize-dropdown, .selectize-input { 
  line-height: 14px; 
}
like image 180
pragmatic_programmer Avatar answered Oct 16 '22 10:10

pragmatic_programmer