diff --git a/core/misc/dropbutton/dropbutton.base.css b/core/misc/dropbutton/dropbutton.base.css index 4b87ff6..c13b814 100644 --- a/core/misc/dropbutton/dropbutton.base.css +++ b/core/misc/dropbutton/dropbutton.base.css @@ -17,9 +17,11 @@ display: block; min-height: 2em; position: relative; +} +.js td .dropbutton-wrapper { float: left; } -.js .dropbutton-wrapper.width-processed { +.js td .dropbutton-wrapper.width-processed { float: none; } .js .dropbutton-wrapper, @@ -30,6 +32,9 @@ .js .dropbutton-wrapper { width: 100%; } + .js td .dropbutton-wrapper { + width: auto; + } } /* Splitbuttons */ @@ -41,7 +46,13 @@ } -.js .dropbutton-widget.width-processed { +.js .dropbutton-widget { + position: absolute; +} +.js td .dropbutton-widget { + position: relative; +} +.js td .width-processed .dropbutton-widget{ position: absolute; } /* UL styles are over-scoped in core, so this selector needs weight parity. */ @@ -80,9 +91,18 @@ .dropbutton-multiple .dropbutton .secondary-action { display: none; } +.js td .dropbutton-multiple .dropbutton .secondary-action { + display: block; +} +.js td .dropbutton-multiple.width-processed .dropbutton .secondary-action { + display: none; +} .dropbutton-multiple.open .dropbutton .secondary-action { display: block; } +.js td .dropbutton-multiple.width-processed.open .dropbutton .secondary-action { + display: block; +} .dropbutton-toggle { bottom: 0; display: block; diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js index d952f00..62052de 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -14,19 +14,22 @@ Drupal.behaviors.dropButton = { if ($body.length) { $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler); } - // Initialize all buttons, and while doing so find the widest button. - var $widestButton = 0; + // Initialize all buttons. for (var i = 0, il = $dropbuttons.length; i < il; i++) { DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton)); - $widestButton = dropbuttonGetMaxWidth($dropbuttons[i], $widestButton); + var buttonWidth = $($dropbuttons[i]).outerWidth(); + // If the button is in the column of a table, set the width of the + // button to the width of the widest button action text. This prevents + // the button text overflowing the table column on narrow screens. + if ($($dropbuttons[i]).parents('td').length > 0) { + var $buttonWidth = $('.dropbutton-widget', $dropbuttons[i]).width(); + var $buttonOuterWidth = $($dropbuttons[i]).width(); + $('.dropbutton-widget', $dropbuttons[i]).width($buttonWidth); + $($dropbuttons[i]).width($buttonOuterWidth); + // Add a class to the button to show width processing has completed. + $($dropbuttons[i]).addClass('width-processed'); + } } - // Set the width of the first dropbutton to that of the widest dropbutton - // to prevent button text overflow on small screens. - $($dropbuttons[0]).width($widestButton); - // Add a class to the dropbutton-wrapper and dropbutton-widget HTML - // elements. This enables styles to be applied that ensure the - // dropbutton text displays correctly. - $('.js .dropbutton-wrapper, .js .dropbutton-widget').addClass('width-processed'); } } }; @@ -170,24 +173,4 @@ $.extend(Drupal.theme, { // Expose constructor in the public space. Drupal.DropButton = DropButton; -/** -* Compares the widths of $button and $widestButton and returns the larger value. -* -* @param {Jquery} $button -* A jQuery $button element. -* -* @param {String} $widestButton -* The width to compare against $button. -* -* @return {String} -* The larger value after comparing the widths of $button and $widestButton. -*/ -function dropbuttonGetMaxWidth($button, $widestButton) { - var buttonWidth = $('.dropbutton-widget', $button).outerWidth(); - if (buttonWidth > $widestButton) { - return buttonWidth; - } - return $widestButton; -} - })(jQuery, Drupal);