paramquery / select

jQuery select plugin
GNU General Public License v3.0
25 stars 21 forks source link

needs a way to custom style everything. #6

Closed jspreddy closed 6 years ago

jspreddy commented 9 years ago

Make the plugin custom styleable. As it stands now, I can't change the styling without changing it inline in the plugin js file.

Extract all the styling strings (css classes) into the options object. Default options will have default styling strings. Can pass in custom styling classes.

paramquery commented 9 years ago

It's not needed to make changes in js file to customize styling. All the styling is done by assigning classes which are in css file. you can have a look at the css file and override the styles by writing your own css rules for those classes.

For example in this demo http://paramquery.com/pro/demos/showhide_columns .pq-select-button and .pq-select-popup-cont classes are customized. ( Please have a look at the css tab under the demo )

.pq-toolbar .pq-select-button { padding:4px 5px; min-width:200px; } .pq-select-popup-cont { max-width:200px; }

Some of the classes can be modified or added with help of options like hoverCls and selectCls

Probably addition of options to inject classes in various states and to different regions of the select list or documentation of the customizable classes would be more appropriate.

jspreddy commented 9 years ago

Agreed. I can write styling to override all the styling classes used in there and get a decent looking thingy. My requirement is that I want to restyle this using bootstrap and not use any jQuery-UI classes. Is there any other way to do that?

paramquery commented 9 years ago

Ok, I see what you mean. I guess you want to assign bootstrap classes to different regions/parts of the select list?

That's a nice suggestion, support for it would be added probably in the next version.

paramquery commented 9 years ago

Just an addition: There is a jsfiddle of customizing css with existing classes in pqSelect

http://jsfiddle.net/dLvx6u63/11/

and the common classes are documented here:

https://github.com/paramquery/select/wiki/Css-customization

massic80 commented 8 years ago

Current release lacks an important class: see #5 from @barseghyanartur. This would be a quick amend!