From fe234b56772d36351d7620e288466272d4e4df0b Mon Sep 17 00:00:00 2001
From: Ridene <rb.ridene@gmail.com>
Date: Tue, 28 Feb 2017 13:30:12 +0100
Subject: [PATCH] #MON-1465 : improve select2 UX
---
www/Themes/Centreon-2/style.css | 14 ++++++++++++--
.../common/javascript/centreon/centreon-select2.js | 12 ++++++++++++
.../javascript/centreon/multiselectResizer.js | 2 +-
3 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/www/Themes/Centreon-2/style.css b/www/Themes/Centreon-2/style.css
index ab410b5862..46d8a78040 100644
--- a/www/Themes/Centreon-2/style.css
+++ b/www/Themes/Centreon-2/style.css
@@ -207,13 +207,16 @@ p.description a, p.description a:visited {
width: 213px !important;
}
+.select2-selection {
+ cursor: initial !important;
+}
+
.select2-container .select2-selection--multiple {
min-height: auto !important;
}
.select2-container .select2-search--inline .select2-search__field {
margin-top: 0 !important;
- width: 200px !important;
}
.select2-container--default .select2-selection--single {
@@ -267,10 +270,17 @@ p.description a, p.description a:visited {
background-color: #bfecff !important;
}
-.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+.formTable .select2-container--default .select2-selection--multiple .select2-selection__rendered {
+ min-height: 28px;
+}
+
+.ajaxOption .select2-container--default .select2-selection--multiple .select2-selection__rendered {
max-height: 80px;
}
+.formTable .select2-container--default .select2-selection--multiple .select2-selection__rendered {
+ min-height: 28px;
+}
/* Selected elements */
.select2-results-header {
diff --git a/www/include/common/javascript/centreon/centreon-select2.js b/www/include/common/javascript/centreon/centreon-select2.js
index 665a51356e..da9e1947e3 100644
--- a/www/include/common/javascript/centreon/centreon-select2.js
+++ b/www/include/common/javascript/centreon/centreon-select2.js
@@ -84,6 +84,18 @@
if (this.settings.multiple) {
this.initMultiple();
}
+
+ this.resizeSelect2();
+ },
+
+ resizeSelect2: function() {
+ var formSpan = jQuery(".formTable span.select2-container");
+ formSpan.css({
+ 'min-width': '360px',
+ });
+ formSpan.find('.select2-selection--multiple .select2-selection__rendered').css({
+ 'resize': 'vertical'
+ });
},
/**
* Load the locale, if not defined in settings use the browser locale
diff --git a/www/include/common/javascript/centreon/multiselectResizer.js b/www/include/common/javascript/centreon/multiselectResizer.js
index 74845178c7..0c67af8447 100644
--- a/www/include/common/javascript/centreon/multiselectResizer.js
+++ b/www/include/common/javascript/centreon/multiselectResizer.js
@@ -40,7 +40,7 @@
*/
jQuery(function() {
// minimum width of the selectbox, change it if you want
- var minAllowedWidth = 270;
+ var minAllowedWidth = 360;
// maximum width of the selectbox, twice larger than minimum width
var maxAllowedWidth = (minAllowedWidth * 2);
--
GitLab