diff --git a/package.json b/package.json index 36294b141..1259ab411 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "imask": "^6.0.7", "litepicker": "^2.0.11", "nouislider": "^14.6.3", - "tom-select": "^1.3.0" + "tom-select": "^1.4.0" }, "resolutions": { "**/**/node-gyp": "^5.0.0" diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html index 4e6b14104..5e459b17c 100644 --- a/src/pages/_includes/ui/select.html +++ b/src/pages/_includes/ui/select.html @@ -56,7 +56,28 @@ var el; window.TomSelect && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), { copyClassesToDropdown: false, + dropdownClass: 'dropdown-menu', + //dropdownContentClass: 'ts-dropdown-content', + optionClass:'dropdown-item', + {% unless include.show-search %} + controlInput: '', + {% endunless %} + + render:{ + item: function(data,escape) { + if( data.customProperties ){ + return '
' + data.customProperties + '' + escape(data.text) + '
'; + } + return '
' + escape(data.text) + '
'; + }, + option: function(data,escape){ + if( data.customProperties ){ + return '
' + data.customProperties + '' + String(data.text) + '
'; + } + return '
' + String(data.text) + '
'; + }, + }, })); }); diff --git a/src/scss/vendor/_tom-select.scss b/src/scss/vendor/_tom-select.scss index 4e5d3a07c..917cfe48c 100644 --- a/src/scss/vendor/_tom-select.scss +++ b/src/scss/vendor/_tom-select.scss @@ -1,6 +1,10 @@ @import "~tom-select/src/scss/tom-select.bootstrap5.scss"; -.ts-control.form-select{ - border: none !important; - padding: 0 !important; +.ts-control{ + .dropdown-menu { + width: 100%; + height: auto; + } + + }