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.
This commit is contained in:
parent
623eb34f1a
commit
3584e74eac
|
@ -49,6 +49,7 @@ import UserCallout from './user_callout';
|
|||
import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
|
||||
import ShortcutsWiki from './shortcuts_wiki';
|
||||
import BlobViewer from './blob/viewer/index';
|
||||
import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
|
||||
|
||||
const ShortcutsBlob = require('./shortcuts_blob');
|
||||
|
||||
|
@ -186,6 +187,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
|
|||
new LabelsSelect();
|
||||
new MilestoneSelect();
|
||||
new gl.IssuableTemplateSelectors();
|
||||
new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
|
||||
break;
|
||||
case 'projects:tags:new':
|
||||
new ZenMode();
|
||||
|
|
|
@ -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;
|
|
@ -482,6 +482,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.target-branch-select-dropdown-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.assign-to-me-link {
|
||||
padding-left: 12px;
|
||||
white-space: nowrap;
|
||||
|
|
|
@ -10,12 +10,16 @@
|
|||
= form.label :source_branch, class: 'control-label'
|
||||
.col-sm-10
|
||||
.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.label :target_branch, class: 'control-label'
|
||||
.col-sm-10
|
||||
.col-sm-10.target-branch-select-dropdown-container
|
||||
.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?
|
||||
|
||||
= link_to 'Change branches', mr_change_branches_path(issuable)
|
||||
|
|
Loading…
Reference in New Issue