Commit efdc63a9 authored by David Stutz's avatar David Stutz

Added CSS class and added mobile "support".

Added the CSS class "multiselect" do add additional styling using CSS.
Fixed #23. Added a possible solution for mobile devices.
parent 494f4d0a
......@@ -152,6 +152,8 @@ The width can be defined using all formats accepted by CSS:
50%
auto
If the width is defined using CSS the option should be set to false.
**buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
......@@ -224,6 +226,17 @@ Refresh the selected elements depending on the selected options within the selec
Rebuilds the whole dropdown menu. Selected options will still be selected.
## Additional Styling
Additional Styling can be done using the multiselect class:
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
## Knockout JS Support
Thanks to [Devristo](https://github.com/Devristo) this plugin supports [Knockout JS](http://knockoutjs.com/). For further discussion see [the pull requests](https://github.com/davidstutz/bootstrap-multiselect/pull/17).
......
This diff is collapsed.
......@@ -53,10 +53,26 @@
this.options = this.getOptions(options);
this.select = $(select);
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
if (this.isMobile()) {
this.select.attr('rows', 1);
}
this.container = $(this.options.buttonContainer)
.append('<button type="button" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) {
$('button', this.container).css({
'width': this.options.buttonWidth
});
}
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
......@@ -66,11 +82,6 @@
});
}
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
this.buildDrowdown(select, this.options);
this.select
......@@ -111,6 +122,10 @@
maxHeight: 400
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
constructor: Multiselect,
buildDrowdown: function(select, options){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment