Commit 3584e74e authored by Eric Eastwood's avatar Eric Eastwood

Fix MR target branch selector dropdown placement cut-off

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.
parent 623eb34f
...@@ -49,6 +49,7 @@ import UserCallout from './user_callout'; ...@@ -49,6 +49,7 @@ import UserCallout from './user_callout';
import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags'; import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
import ShortcutsWiki from './shortcuts_wiki'; import ShortcutsWiki from './shortcuts_wiki';
import BlobViewer from './blob/viewer/index'; import BlobViewer from './blob/viewer/index';
import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
const ShortcutsBlob = require('./shortcuts_blob'); const ShortcutsBlob = require('./shortcuts_blob');
...@@ -186,6 +187,7 @@ const ShortcutsBlob = require('./shortcuts_blob'); ...@@ -186,6 +187,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
new LabelsSelect(); new LabelsSelect();
new MilestoneSelect(); new MilestoneSelect();
new gl.IssuableTemplateSelectors(); new gl.IssuableTemplateSelectors();
new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
break; break;
case 'projects:tags:new': case 'projects:tags:new':
new ZenMode(); new ZenMode();
......
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;
...@@ -482,6 +482,10 @@ ...@@ -482,6 +482,10 @@
} }
} }
.target-branch-select-dropdown-container {
position: relative;
}
.assign-to-me-link { .assign-to-me-link {
padding-left: 12px; padding-left: 12px;
white-space: nowrap; white-space: nowrap;
......
...@@ -10,12 +10,16 @@ ...@@ -10,12 +10,16 @@
= form.label :source_branch, class: 'control-label' = form.label :source_branch, class: 'control-label'
.col-sm-10 .col-sm-10
.issuable-form-select-holder .issuable-form-select-holder
= form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 span2', disabled: true }) = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2', disabled: true })
.form-group .form-group
= form.label :target_branch, class: 'control-label' = form.label :target_branch, class: 'control-label'
.col-sm-10 .col-sm-10.target-branch-select-dropdown-container
.issuable-form-select-holder .issuable-form-select-holder
= form.select(:target_branch, issuable.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: issuable.new_record?, data: { placeholder: "Select branch" }}) = form.select(:target_branch, issuable.target_branches,
{ include_blank: true },
{ class: 'target_branch js-target-branch-select',
disabled: issuable.new_record?,
data: { placeholder: "Select branch" }})
- if issuable.new_record? - if issuable.new_record?
   
= link_to 'Change branches', mr_change_branches_path(issuable) = link_to 'Change branches', mr_change_branches_path(issuable)
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