Merge branch 'issue-boards-milestone-dropdown-stop-scroll' into 'master'

Fixed multiple boards new form scrolling

Closes #1897

See merge request !1414

app/assets/javascripts/boards/components/board_new_form.js

@@ -59,9 +59,20 @@ const extraMilestones = require('../mixins/extra_milestones');
       },
     },
     methods: {
-      loadMilestones() {
+      loadMilestones(e) {
         this.milestoneDropdownOpen = !this.milestoneDropdownOpen;
         BoardService.loadMilestones.call(this);
+
+        if (this.milestoneDropdownOpen) {
+          this.$nextTick(() => {
+            const milestoneDropdown = this.$refs.milestoneDropdown;
+            const rect = e.target.getBoundingClientRect();
+
+            milestoneDropdown.style.left = `${rect.left}px`;
+            milestoneDropdown.style.top = `${rect.bottom}px`;
+            milestoneDropdown.style.width = `${rect.width}px`;
+          });
+        }
       },
       submit() {
         gl.boardService.createBoard(this.board)

app/assets/stylesheets/pages/boards.scss

@@ -574,8 +574,7 @@
   margin-top: 10px;
 
   .dropdown-menu {
-    top: 60px;
-    min-width: 100%;
+    position: fixed;
   }
 }
 

app/views/projects/boards/components/_form.html.haml

@@ -14,10 +14,11 @@
       %label.label-light{ for: "board-milestone" }
         Board milestone
       %button.dropdown-menu-toggle.wide{ type: "button",
-        "@click.stop.prevent" => "loadMilestones" }
+        "@click.stop.prevent" => "loadMilestones($event)" }
         {{ milestoneToggleText }}
         = icon("chevron-down")
-      .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen" }
+      .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen",
+        ref: "milestoneDropdown" }
         .dropdown-content
           %ul
             %li{ "v-for" => "milestone in extraMilestones" }