Update dropdown button class and text truncation

Modified dropdown button classes for better alignment and added text-truncate to ensure selected text is properly truncated. Adjusted structure to handle multiple configurations more effectively.
ThomasDev-de · Nov 15, 2024 · ce77081 · ce77081
1 parent 9ca4a18
commit ce77081
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
   "name": "webcito/bs-select",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "A jQuery-based plugin for creating customizable Bootstrap-style select dropdowns with various features including search, multi-select, and dynamic updates.",
   "minimum-stability": "stable",
   "license": "MIT",

diff --git a/dist/jquery.bs-select.js b/dist/jquery.bs-select.js
@@ -580,23 +580,23 @@
             // add dropdown toggle item
             if (!settings.btnSplit) {
                 $('<button>', {
-                    class: `btn ${settings.btnClass} ${toggleIconClass} d-flex align-items-center flex-nowrap js-dropdown-header justify-content-between`,
+                    class: `btn ${settings.btnClass} ${toggleIconClass} d-flex flex-nowrap align-items-start flex-nowrap js-dropdown-header justify-content-between`,
                     type: 'button',
                     'data-bs-toggle': 'dropdown',
                     'data-toggle': 'dropdown',
                     'aria-expanded': false,
                     'data-bs-auto-close': multiple ? 'outside' : true,
-                    html: `<span class="js-selected-text">${settings.btnEmptyText}</span>${dropIcon}`,
+                    html: `<span class="js-selected-text text-truncate text-nowrap d-inline-block">${settings.btnEmptyText}</span>${dropIcon}`,
                     css: {
                         width: settings.btnWidth
                     }
                 }).appendTo($dropdown);
             } else {
                 $dropdown.addClass('btn-group');
                 $('<button>', {
-                    class: `btn ${settings.btnClass} d-flex align-items-center js-dropdown-header justify-content-between`,
+                    class: `btn ${settings.btnClass} d-flex flex-nowrap align-items-start js-dropdown-header justify-content-between`,
                     type: 'button',
-                    html: `<span class="js-selected-text">${settings.btnEmptyText}</span>`,
+                    html: `<span class="js-selected-text d-inline-block text-truncate text-nowrap">${settings.btnEmptyText}</span>`,
                     css: {
                         width: settings.btnWidth
                     }