Merge pull request #50 from acsone/10.0-fix_dropdown_menu_position-lmi

[10.0] [FIX] dropdown menu position

CHANGES.rst

@@ -1,6 +1,8 @@
 10.0.?.?.? (?)
 ~~~~~~~~~~~~~~
 
+* Fix: For items displayed into the datatable, adjust the dropdown menu
+  position based on page width.
 * Fix: A name in CMIS can not ends with a dot. On the CMIS backend the
   'sanitize_cmis_name' method removes this character if it's found at the
   end of the string to sanitize and this case is detected by the method

cmis_web/static/src/js/form_widgets.js

@@ -1097,9 +1097,28 @@ var CmisMixin = {
      */
     dropdown_fix_position: function(button){
         var dropdown = $(button.parent()).find('.dropdown-menu');
-        var dropDownTop = button.offset().top + button.outerHeight();
-          dropdown.css('top', dropDownTop + "px");
-          dropdown.css('left', button.offset().left + "px");
+        var offset = button.offset();
+        var dropDownTop = offset.top + button.outerHeight();
+        dropdown.css('top', dropDownTop + "px");
+
+        // For the left position we need to take care of the available space
+        // on the right and the width of the dropdown to display according to
+        // its content.
+        // see http://codereview.stackexchange.com/questions/31501/adjust-bootstrap-dropdown-menu-based-on-page-width/39580
+        var offsetLeft = offset.left;
+        var dropdownWidth = dropdown.width();
+        var docWidth = $(window).width();
+        var subDropdown = dropdown.eq(1);
+        var subDropdownWidth = subDropdown.width();
+        var isDropdownVisible = (offsetLeft + dropdownWidth <= docWidth);
+        var isSubDropdownVisible = (offsetLeft + dropdownWidth + subDropdownWidth <= docWidth);
+        if (!isDropdownVisible || !isSubDropdownVisible) {
+            dropdown.addClass('pull-right');
+            dropdown.css('left', '');
+        } else {
+            dropdown.removeClass('pull-right');
+            dropdown.css('left', button.offset().left + "px");
+        }
     },
 
 

cmis_web/static/src/less/form_widgets.less

@@ -38,6 +38,12 @@
         .btn-xs {
           .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small) !important;
         }
+        .dropdown-menu {
+            > li > a {
+                padding-top: 3px !important;
+                padding-bottom: 3px !important;
+            }
+        }
      }
 }