summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/issuable
diff options
context:
space:
mode:
authorEric Eastwood <contact@ericeastwood.com>2017-04-25 04:34:46 -0500
committerEric Eastwood <contact@ericeastwood.com>2017-05-01 10:28:40 -0500
commit3584e74eacfc101c64fe1305bbf97515e86ebc88 (patch)
treef96e86f49cb62020e43af9007766a3cfce83e32f /app/assets/javascripts/issuable
parent623eb34f1a54607d5da5e79a41ffa03de2ae3285 (diff)
downloadgitlab-ce-3584e74eacfc101c64fe1305bbf97515e86ebc88.tar.gz
Fix MR target branch selector dropdown placement cut-off31271-fixmr-target-branch-selector-dropdown
Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/31271 When the dropdown items are too wide, constrain the dropdown to the offsetParent. Otherwise, let it naturally flow as Select2 wants.
Diffstat (limited to 'app/assets/javascripts/issuable')
-rw-r--r--app/assets/javascripts/issuable/auto_width_dropdown_select.js38
1 files changed, 38 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
new file mode 100644
index 00000000000..2203a56315e
--- /dev/null
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -0,0 +1,38 @@
+let instanceCount = 0;
+
+class AutoWidthDropdownSelect {
+ constructor(selectElement) {
+ this.$selectElement = $(selectElement);
+ this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
+ instanceCount += 1;
+ }
+
+ init() {
+ const dropdownClass = this.dropdownClass;
+ this.$selectElement.select2({
+ dropdownCssClass: dropdownClass,
+ dropdownCss() {
+ let resultantWidth = 'auto';
+ const $dropdown = $(`.${dropdownClass}`);
+
+ // We have to look at the parent because
+ // `offsetParent` on a `display: none;` is `null`
+ const offsetParentWidth = $(this).parent().offsetParent().width();
+ // Reset any width to let it naturally flow
+ $dropdown.css('width', 'auto');
+ if ($dropdown.outerWidth(false) > offsetParentWidth) {
+ resultantWidth = offsetParentWidth;
+ }
+
+ return {
+ width: resultantWidth,
+ maxWidth: offsetParentWidth,
+ };
+ },
+ });
+
+ return this;
+ }
+}
+
+export default AutoWidthDropdownSelect;