Meta Issue:#1870944: [Meta] Mobile friendly admin pages

Problem/Motivation

- Alignment of text in action dropdown. In Narrow screens the text is partly hidden.

- dropbutton cuts off long action item, either in the button or at the edge of the window.

Reproduce:

  1. Apply bug.patch
  2. Go to admin/structure/types/manage/article/fields
  3. Trying to reduce the width of browser window

Proposed resolution

A. Comment #57: Trying to fix both issues with a JS solutions. When the buttons placed nearly at edge of the windows side. Dropdown menu expands in same positions. see image in Comment #57. Table columns retains as the smallest as possible.
B. Comment #63: The column width will change according to the longest widget. BUT when it expended, the longest menu still cut off.
C. Comment #97: Patch flying in with a pure css solution that unifies the dropbutton width to that of the longest item.

Remaining tasks

  1. Needs a CSS approach to resolve both problem and retains performance.
  2. If above is failing, reviews the performance affection of Comment #57 patch.

CommentFileSizeAuthor
#167 drupal-core-1890266.gif3.83 MBVladimirAus
#162 after-patch.png63.15 KBdjsagar
#162 Before-patch.png57.6 KBdjsagar
#162 Issue-after-patch.png55.53 KBdjsagar
#160 After-patch.png111.49 KBkomalk
#160 Before-patch.png108.7 KBkomalk
#160 interdiff_156-160.txt1.58 KBkomalk
#160 1890266-160.patch5.73 KBkomalk
#158 afterPatch#156.png23.61 KBRuchi Joshi
#156 interdiff_155-156.txt1.54 KBkomalk
#156 1890266-156.patch3.83 KBkomalk
#155 1890266-155.patch1.91 KBkomalk
#146 dropbutton-1890266-146.patch1.9 KBPancho
#145 user-dropbutton-after.gif185.68 KBPancho
#145 user-dropbutton-before.gif276.08 KBPancho
#145 dropbutton-1890266-145a.patch1.9 KBPancho
#144 dropbutton-1890266-145.patch1.51 KBPancho
#3 1890266-filters.patch668 byteshansrossel
#5 1890266-alignment-text-action-dropdown-after.jpg17.76 KBedrupal
#5 1890266-alignment-text-action-dropdown-before.jpg16.35 KBedrupal
#7 after-600.png34.26 KBechoz
#7 before-600.png33.63 KBechoz
#7 after-900.png34.35 KBechoz
#7 before-900.png34.1 KBechoz
#8 1890266-alignment-text-action-dropdown-8-after.jpg24.86 KBedrupal
#8 1890266-alignment-text-action-dropdown-8-before.jpg23.06 KBedrupal
#10 alignment-text-action-dropdown-1890266-10.patch1.34 KBedrupal
#15 dropbutton-text-width-1890266-15.patch2.4 KBedrupal
#17 interdiff-15-17.txt818 bytesedrupal
#17 dropbutton-text-width-1890266-17.patch2.65 KBedrupal
#20 dropbutton-text-width-1890266-20.patch2.65 KBedrupal
#23 interdiff-20-23.txt2.08 KBedrupal
#23 dropbutton-text-width-1890266-23.patch2.59 KBedrupal
#27 interdiff-23-27.txt2.55 KBedrupal
#27 dropbutton-text-width-1890266-27.patch2.44 KBedrupal
#28 interdiff-23-28.txt2.57 KBedrupal
#28 dropbutton-text-width-1890266-28.patch2.44 KBedrupal
#32 interdiff-28-32.txt1.82 KBedrupal
#32 dropbutton-text-width-1890266-32.patch2.51 KBedrupal
#33 interdiff-32-33.txt1.64 KBYesCT
#33 dropbutton-text-width-1890266-33.patch2.51 KBYesCT
#34 withoutpatch_goesoveredge.png58.84 KBYesCT
#34 nopatch_nojump.png78.3 KBYesCT
#34 jumped_left.png61.57 KBYesCT
#34 jumping_1.png51.34 KBYesCT
#34 after_nocutoff.png192.97 KBYesCT
#34 before_cutsoff.png204.37 KBYesCT
#39 dropbutton-textformats-open-before.jpg13.14 KBedrupal
#39 dropbutton-textformats-open-after.jpg15.04 KBedrupal
#39 dropbutton-textformats-closed-before.jpg12.24 KBedrupal
#39 dropbutton-textformats-closed-after.jpg12.56 KBedrupal
#39 dropbutton-content-list-before.jpg8.67 KBedrupal
#39 dropbutton-content-list-after.jpg8.83 KBedrupal
#39 interdiff-32-39.txt4.09 KBedrupal
#39 dropbutton-text-width-1890266-39.patch2.65 KBedrupal
#45 interdiff-39-45.txt1.45 KBedrupal
#45 dropbutton-text-width-1890266-45.patch2.59 KBedrupal
#57 dropdown.png9.87 KBdroplet
#57 dropdown.patch3.07 KBdroplet
#63 1890266-63.patch602 bytesRisse
#63 dropbutton-width-normal.png32.33 KBRisse
#63 dropbutton-width-wide.png31.6 KBRisse
#66 1890266-66.patch593 bytesravi.khetri
#69 1890266_before.png96.49 KBno_angel
#74 cut-off.png19.95 KBdroplet
#74 cut-off-2.png14.68 KBdroplet
#74 bug.patch1.14 KBdroplet
#75 Figure 1 - Firefox crash FYI.png68.35 KBno_angel
#75 Figure 2 - after bug.patch.png113.83 KBno_angel
#75 Figure 3 - after bug.patch.png80.19 KBno_angel
#75 Figure 4 - After applying 1890266-66_0.patch.png52.62 KBno_angel
#75 Figure 5 - After applying 1890266-66_0.patch.png79.98 KBno_angel
#75 Figure 6 - After applying 1890266-66_0.patch.png42.4 KBno_angel
#77 Figure 7 - git diff.png126.99 KBno_angel
#81 drupal-1890266-81-dropbutton-width.patch990 bytesgeek-merlin
#82 drupal-1890266-82-dropbutton-width.patch1016 bytesgeek-merlin
#87 taxonomy.png50.52 KBtimisoreana
#87 manage_article_fields.png56.5 KBtimisoreana
#87 comment_types.png63.57 KBtimisoreana
#87 content_types.png67.47 KBtimisoreana
#87 contact.png58.11 KBtimisoreana
#87 few_words_in_dropdown.png67.93 KBtimisoreana
#92 dropbutton-bug-testing--do-not-test.patch744 bytesdroplet
#97 drupal-1890266-97-dropbutton-width.patch1.72 KBgeek-merlin
#99 drupal-1890266-99-dropbutton-width.patch2.62 KBgeek-merlin
#101 normal-menu.png22.36 KBdroplet
#105 dropbutton-widget-width-1890266-105.patch745 bytesManinders
#105 dropdown-width-1.png42.71 KBManinders
#105 dropdown-width-2.png38.28 KBManinders
#105 dropdown-width-3.png36.89 KBManinders
#105 dropdown-width-4.png34.5 KBManinders
#108 dropbutton-widget-width-1890266-108.patch732 bytesManinders
#109 Screenshot from 2016-06-14 17:49:26.png96.56 KBManjit.Singh
#109 Screenshot from 2016-06-14 17:50:11.png96.14 KBManjit.Singh
#109 Screenshot from 2016-06-14 17:49:59.png85.14 KBManjit.Singh
#111 Screenshot-from-2016-06-21-16-52-18.png36.86 KBManinders
#111 Screenshot-from-2016-06-21-16-52-47.png36.96 KBManinders
#112 dropbutton-widget-width-1890266-111.patch732 bytesManinders
#114 Before_apply.png15.54 KBbrahmjeet789
#114 after_applypatch.png22.19 KBbrahmjeet789
#117 dropdown_117.png38.21 KBkostyashupenko
#117 dropbutton_text_fails-1890266-117.patch1 KBkostyashupenko
#117 interdiff.txt861 byteskostyashupenko
#118 after_apply_117.png22.8 KBbrahmjeet789
#124 manage_fields.png41.81 KBManjit.Singh
#124 comment_type.png53.8 KBManjit.Singh
#124 comment_type_inspect.png51.33 KBManjit.Singh
#126 dropdown_1.png37.54 KBkostyashupenko
#126 dropdown_1_opened.png41.7 KBkostyashupenko
#126 dropbutton_text_fails-1890266-126.patch2.04 KBkostyashupenko
#129 header_section-breaks-down.png16.74 KBbrahmjeet789
#130 dropbutton_text_fails-1890266-130.patch2.04 KBkostyashupenko
#130 interdiff.txt872 byteskostyashupenko
#134 extended-button.jpg123.75 KBAaronChristian
#141 very-long-multiple-dropbutton-open-after.png10.65 KBPancho
#141 very-long-multiple-dropbutton-open-before.png12.36 KBPancho
#141 very-long-multiple-dropbutton-closed-after.png6.16 KBPancho
#141 very-long-multiple-dropbutton-closed-before.png9.3 KBPancho
#141 filter-dropbutton-seven-after.png11.88 KBPancho
#141 filter-dropbutton-seven-before.png7.42 KBPancho
#141 multiple-dropbutton-seven-after.png12.5 KBPancho
#141 multiple-dropbutton-seven-before.png12.55 KBPancho
#141 single-dropbutton-seven-after.png12.96 KBPancho
#141 single-dropbutton-seven-before.png13.36 KBPancho
#141 interdiff-99-141.txt2.73 KBPancho
#141 dropbutton-1890266-141.patch3.2 KBPancho
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

Issue tags: +mobile-novice, +CSS novice

Novice tags

edrupal’s picture

Any thoughts as to what would be a good solution.

  • Add some padding to the right of the column heading so it's a minimum width of the longest text that could be in the column?
  • Set a min width for the Operations column?

I'd be happy to take the task on but not sure of the best way to move forward

hansrossel’s picture

Status: Active » Needs review
FileSize
668 bytes

Attached patch does not use position:absolute in mobile. I tested also other places where the dropwidget is used, like admin/structure/menu

dawehner’s picture

Issue tags: +Needs screenshots

Something which really helps to review such issues are two screenshots showing before and after the patch.

edrupal’s picture

1. Before screenshot of url /admin/config/content/formats

Before screenshot

2. After screenshot of url /admin/config/content/formats

After screenshot

edrupal’s picture

Issue tags: -Needs screenshots
echoz’s picture

Status: Needs review » Needs work
FileSize
34.26 KB
33.63 KB
34.35 KB
34.1 KB

Note that #3 patch, removing position: absolute; stretches the buttons wide, and the plain button that is not a drop-button is equally as wide. Screenshots attached.

edrupal’s picture

Did a bit more testing. In addition to the point raised in #7, the patch from #3 causes a change in the centring of the text in other columns when the drop down is expanded.

1. Before screenshot of url /admin/config/content/formats - drop down expanded
Before screenshot

2. After screenshot of url /admin/config/content/formats - drop down expanded
After screenshot

edrupal’s picture

Ignore #9 - finger trouble

edrupal’s picture

Status: Needs work » Needs review
FileSize
1.34 KB

Another approach would be to use javascript to set the minimum width of the dropbutton-wrapper to that of the widest dropbutton. This patch attempts to implement this approach.

hansrossel’s picture

about the issues in #7, you are right, but those would be solved if the media query of patch #3 is set to 400 instead of 901. I need to measure more exactly at which width the issue starts and use that value in the media query. I cannot make a patch at the moment. On the other hand the configure text might have a different length in other languages so the js approach of the latest patch is then safer, I will test when I find wifi.

echoz’s picture

Status: Needs review » Needs work

@10 patch, awesome! I hope you're on to the solution, but I found that when I click disable and cancel, or just click configure of one of the drop buttons, then go back to the previous screen (add text format) the js fix is no longer being used, the buttons are squished again, until I clear the site's cache, reload doesn't do it.

echoz’s picture

Title: Alignment of text in action dropdown » dropbutton text fails to retain .dropbutton-widget width
Component: CSS » javascript
echoz’s picture

Issue tags: -CSS novice
edrupal’s picture

On further investigation to get the correct button width the button must be positioned relative. Additionally, before calculating the width the button wrapper must be floated so it doesn't take the column width when the screen is wide.

This version of the patch takes the following approach:

1. Initially set the button wrapper and widget to floated left and position relative, respectively.
2. Use js to calculate the widest button widget.
3. Set the width of all the button widgets to the widest one.
4. Use js to reset the button wrapper and widget styles so they display correctly.

Would be good to get feedback on whether this is a valid approach.

edrupal’s picture

Status: Needs work » Needs review
edrupal’s picture

Update to the comments to better fit in with drupal standards.

YesCT’s picture

Status: Needs review » Needs work
Issue tags: +Usability, +mobile, +Responsive Design, +d8mux, +mobile-novice, +d8mux-admin

The last submitted patch, dropbutton-text-width-1890266-17.patch, failed testing.

edrupal’s picture

Re-rolled patch in case that's why it's failing

edrupal’s picture

Status: Needs work » Needs review
star-szr’s picture

Status: Needs review » Needs work

Thanks for your work on this everyone, especially @edrupal. Coding standards/documentation review follows:

  1. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    +* Returns a string representing the wider of button or $widestButton.
    

    Can this be reworded? "the wider of button or $widestButton" sounds odd. Maybe "Compares button and $widestButton and returns the largest value."? See also point #6.

  2. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    +*   A jQuery buttom element
    

    s/buttom/button. These comments also need to end in a period per http://drupal.org/node/1354#drupal.

  3. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    +* @param {String} $widestButton
    +*   A string representing the width to compare against the button element
    

    String is redundant, how about removing "A string representing”, so it’s “The width to compare…”?

  4. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    +* @return {String}
    +*   A string representing the wider of button and $widestButton
    

    Again, string is redundant – maybe just “The largest width value."?

  5. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    + var buttonWidth = $('.dropbutton-widget', $button).outerWidth();
    + if (buttonWidth > $widestButton) {
    +   return buttonWidth;
    + } else return $widestButton;
    

    These lines need to be indented by two spaces instead of one.

  6. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -161,4 +175,24 @@ $.extend(Drupal.theme, {
    +* @param {Jquery} button
    ...
    +* @param {String} $widestButton
    

    Is there a reason why the second parameter has a $ and the first doesn't?

edrupal’s picture

Status: Needs work » Needs review
FileSize
2.08 KB
2.59 KB

Thanks for the excellent feedback @Cottser. I've incorporated all the comments into this latest patch.

tim.plunkett’s picture

Status: Needs review » Needs work
+++ b/core/misc/dropbutton/dropbutton.base.cssundefined
@@ -17,6 +17,10 @@
+.js .dropbutton-wrapper.no-float {

@@ -37,7 +41,7 @@
+.js .dropbutton-widget.position-absolute {

Why are we using class names that map 1:1 with CSS properties? I don't know of anywhere else in core that is done, or why it is appropriate here.

star-szr’s picture

Thanks for the quick turnaround, @edrupal! Agreed with @tim.plunkett, those class names could be improved, and maybe combined into one class name - something like "processed"? Not sure what the convention is there.

Some more documentation/standards suggestions and notes:

  1. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -14,10 +14,24 @@ Drupal.behaviors.dropButton = {
    +      /**
    +       * Set minimum width of first drop buttom wrapper to that of the widest
    +       * dropButton to prevent button text overflow when screen width is small.
    +       */
    

    Wording on this could be improved (parts are a bit terse), and this should be an inline comment (//). Something like "Set the minimum width of the first dropbutton wrapper to that of the widest dropbutton to prevent button text overflow on small screens."

  2. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -14,10 +14,24 @@ Drupal.behaviors.dropButton = {
    +      /**
    +       * In order to accurately calculate the button width, the button wrapper
    +       * had to be set to float and widget set to position relative.
    +       * These settings must be undone to ensure the button displays correctly.
    +       */
    

    This should be an inline comment as well. This comment confused me at first, here's another suggestion but could be improved by someone who understands this patch more than I do: "In order to accurately calculate the button width, the button wrapper is initially floated and the widget is positioned relatively."

    On the next line, can we replace "settings must be undone" with "attributes must be overridden" or something along those lines? CSS doesn't have settings :)

  3. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -176,23 +176,25 @@ $.extend(Drupal.theme, {
    +* Compares the width of $button to the width of $widestButton and returns the
    +* the larger value.
    

    This is now too long, the summary line must be under 80 characters per http://drupal.org/node/1354#drupal.

  4. +++ b/core/misc/dropbutton/dropbutton.jsundefined
    @@ -176,23 +176,25 @@ $.extend(Drupal.theme, {
    -* @param {String} $widestButton
    ...
    +* @param $widestButton
    ...
    -* @return {String}
    ...
    +* @return
    

    Sorry for the confusion - I meant the "A string…" text from the parameter description was redundant. The {String} data types should be kept.

star-szr’s picture

+++ b/core/misc/dropbutton/dropbutton.jsundefined
@@ -161,4 +175,26 @@ $.extend(Drupal.theme, {
+*   A jQuery $buttom element.

Oops, this was missed. Should be "$button" :)

edrupal’s picture

Status: Needs work » Needs review
FileSize
2.55 KB
2.44 KB

Thanks for your patience and feedback. Here's another version.

edrupal’s picture

Typo correction and change of name of the 'processed' class.

tim.plunkett’s picture

Issue tags: +Needs manual testing

Tagging.

star-szr’s picture

Thanks @edrupal, looks good to me. Only a couple more tiny nits to pick, leaving at needs review though:

+++ b/core/misc/dropbutton/dropbutton.jsundefined
@@ -161,4 +170,25 @@ $.extend(Drupal.theme, {
+* @return {String}
+*   The largest width value.
+*
+*/

Extra line here after the @return description and before the */ is not needed.

+++ b/core/misc/dropbutton/dropbutton.jsundefined
@@ -20,18 +20,13 @@ Drupal.behaviors.dropButton = {
+      // Add a class to the dropbutton-wrapper and dropbutton-widget html

html should be capitalized.

Edit: Added more context to @return code snippet.

star-szr’s picture

Issue summary: View changes

added drupal/admin/structure/taxonomy

YesCT’s picture

updated issue summary remaining tasks section.

edrupal’s picture

Thanks. Updated patch and another slight change to name of 'processed' class.

YesCT’s picture

these changes to the code look good.

I noticed some of the lines could have been wrapper longer but still under 80 chars.
Also, there was a block of comments missing one space indentation.

I made those changes.

next steps here: manual testing (see contributor task doc on manual testing: http://drupal.org/node/1489010)

YesCT’s picture

at first this looked really good.
before patch: cuts off
before_cutsoff.png
after patch:
no cut off
after_nocutoff.png

then I noticed that the row height changed when the button expanded making the other rows jump and move.
this does not happen without the patch.

I was looking for a button that had a short word on top, and a longer word under.
with translation enabled, the content list has that.

I noticed that the column widths change when the button is expanded.
this does not happen without the patch.

compare this:
jumping_1.png
with this:
jumped_left.png
with no patch:
nopatch_nojump.png
with no patch: goes over edge.
withoutpatch_goesoveredge.png

I tried to apply the patch and get the row height to change again...
now I cannot reproduce the row height changing and I'm confused. I cleared caches on the site, and the browser cache... I'm not sure why.
Posting what I have now. Me or someone else can come back and do another round of manual testing.

Q1: Do we want the row height to change when the drop button is expanded? (I think we do not want that.)
Q2: Is column width changing when the drop button is expanded a blocker to this? (I think yes.)
In general, I think we dont want the page to jump around.

The approach in the patch is to set the width of the first item in the button to be the width of the widest button.

star-szr’s picture

edrupal’s picture

Hi @Cottser, would it be best practice to change the @param blocks in all the other functions in the program dropbutton.js so there is consistency, even if they are not related to this issue?

star-szr’s picture

@edrupal - Good question. We should only change the ones in this patch, and we'll file followup issue(s) to correct the existing curly braces and extra lines.

star-szr’s picture

Please see #1958246-2: Update JS documentation to follow Doxygen format (remove curly braces) - in addition to #35 it looks like button should be $button and widestButton should be widestButton. JavaScript docs are complicated! :)

edrupal’s picture

As well as the issues already identified in #34 the previous patch also caused problems on the views admin pages where the hidden buttons in the advanced section where not sized correctly.

I've re-written the patch. The principle has not changed - to calculate the width of the widest text in the button and set the button width to this value.

Now the change is restricted to only work on buttons that are in the column of a table, and makes sure there are no hidden button elements before calculating its width.

This change is to ensure buttons that are not part of a column table are unaffected (which is where all the known issues occur).

1a. Content list - before patch applied (/admin/content)
Content list before

1b. Content list - after patch applied (/admin/content)
content list after

2a. Text format configuration - button closed - before patch applied (/admin/config/content/formats)
text format closed before

2b. Text format configuration - button closed - after patch applied (/admin/config/content/formats)
text format closed after

3a. Text format configuration - button open - before patch applied (/admin/config/content/formats)
text formats open before

3b. Text format configuration - button open - after patch applied (/admin/config/content/formats)
text formats open after

Status: Needs review » Needs work
Issue tags: -Usability, -mobile, -Needs manual testing, -Responsive Design, -d8mux, -mobile-novice, -d8mux-admin

The last submitted patch, dropbutton-text-width-1890266-39.patch, failed testing.

edrupal’s picture

Status: Needs work » Needs review
Issue tags: +Usability, +mobile, +Needs manual testing, +Responsive Design, +d8mux, +mobile-novice, +d8mux-admin
tstoeckler’s picture

Re @YesCT:

Q1: Do we want the row height to change when the drop button is expanded? (I think we do not want that.)
Q2: Is column width changing when the drop button is expanded a blocker to this? (I think yes.)

I tend to agree with you but these two details were specifically implemented the way they are in the original implementation. So if that bugs you I think you have to open a new issue and fight Bojhan or yoroy :-)

echoz’s picture

#42, the way the dropbuttons currently work does not expand row height or width when expanded, because of the absolute positioning.

YesCT’s picture

Issue tags: -Needs manual testing

I like the functionality of this patch a lot.
No jumping around of the table rows. :)
Removing needs manual testing tag. (I did not check views, but looks like @edrupal did)

I'm not sure about the need for $ or no $ as @Cottser mentioned in #38, so a standards check of js would be nice.

edrupal’s picture

Minor update to correct the variable names to fit in with standards.

tim.plunkett’s picture

+++ b/core/misc/dropbutton/dropbutton.jsundefined
@@ -17,6 +17,17 @@ Drupal.behaviors.dropButton = {
+        if ($($dropbuttons[i]).parents('td').length > 0) {
...
+          var buttonOuterWidth = $($dropbuttons[i]).width();
...
+          $($dropbuttons[i]).width(buttonOuterWidth);
...
+          $($dropbuttons[i]).addClass('width-processed');

These should also probably be assigned into a variable first

+++ b/core/misc/dropbutton/dropbutton.jsundefined
@@ -17,6 +17,17 @@ Drupal.behaviors.dropButton = {
+          var buttonWidth = $('.dropbutton-widget', $dropbuttons[i]).width();
...
+          $('.dropbutton-widget', $dropbuttons[i]).width(buttonWidth);

In both places here we do $('.dropbutton-widget', $dropbuttons[i]);, why not assign that to a variable first?

nod_’s picture

Status: Needs review » Needs work

I'm really not comfortable with the JS that's added here.

Before the patch, 1 dropbutton took 1ms to initialize. After the patch: 5ms. After the patch and some work on it: 4ms.

There have been lots of work to make the footprint of dropbutton JS as low as possible, this totally defeats the purpose. Think of a view with 50 dropbuttons on a mobile phone (like the admin/content page for example, it'll be a view at some point). Rendering takes 50ms. With the patch it takes 250ms. On a mobile? it takes 500ms and with the patch it would take 2.5 seconds, on top of all jQuery, Backbone and whatever else is on the page. This can not work.

Also we can't be using the -processed class in our CSS. It comes from the jQuery.once plugin and that plugin will soon be using data-attributes that you shouldn't be using in CSS to begin with.

I'm not sure of the way forward but it's not a JS-heavy one. Try to see if a CSS-only solution will work out please. you'll probably have to mess around with the current styling.

I can't support a patch that will make admin/content page take 2.5s to render mobile device because of dropbuttons.

hiddenfellon’s picture

If you're concerned about the js then another solution would be just set the min-width to 100px, I don't know you guys feel about that approach.

YesCT’s picture

@nod_ 's comment on performance is pretty important.

related:
#1849750: Minimize all "Operations" columns width
#1914800: Dropbutton width is smaller than longest item

updating issue summary.

YesCT’s picture

Issue summary: View changes

updated remaining tasks

RainbowArray’s picture

It seems like the fundamental problem here is that some text strings may be too long for the space available, particularly on vertical mobile viewports.

This is probably beyond the scope of this particular issue, but it seems to me that a responsive tables solution might be a good way to go here.

Here's one of my favorite methods: http://css-tricks.com/examples/ResponsiveTables/responsive.php

Essentially this flips the table from horizontal to vertical. The column headers become row headers, with each of the previous rows as a new section on the table. There is a lot more vertical scrolling, but the upside is that it should be much better performance wise than getting JS involved. And this should be able to handle text strings of arbitrary length in a better way than before.

Again, maybe too radical a change. Just a thought of another way to go.

klonos’s picture

...this issue needs to either be switched to a bug or its title changed to something like "Make dropbutton text retain .dropbutton-widget width." in order to reflect it being a task. Just saying...

echoz’s picture

Component: javascript » Seven theme
Category: task » bug
Issue tags: -mobile-novice +JavaScript

Changing to "bug report" and component: "Seven theme", but adding tag "JavaScript" for monitoring in case solutions still involve js.

echoz’s picture

Issue summary: View changes

added related issues and updated proposed resolution and remaining tasks.

jaffaralia’s picture

Issue summary: View changes
Issue tags: +Needs reroll

The patch #45 did not apply. it shows this error: core/misc/dropbutton/dropbutton.base.css: No such file or directory

philipz’s picture

I think this issue is related to #1989470: Dropbutton style update for Seven where this problem is fixed as far as I remember.

droplet’s picture

droplet’s picture

FileSize
9.87 KB
3.07 KB

The above patches expand the TR column as long as possible (same width as the longest dropbutton menu). Personally I prefer to expand the menu over the element directly and do not modify the TR width.

expand

Attached a patch to demonstrate my thoughts.

YesCT’s picture

Status: Needs work » Needs review
YesCT’s picture

Issue tags: -Needs reroll

applies, removing needs reroll tag.

YesCT’s picture

Issue summary: View changes
Issue tags: +Needs reroll

does not apply anymore.
tagging needs reroll and adding instructions in the issue summary remaining tasks section.

LewisNyman’s picture

Issue tags: +frontend, +CSS
Jalandhar’s picture

Status: Needs review » Needs work

As per #60

Risse’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
602 bytes
32.33 KB
31.6 KB

My proposition: make the dropbutton-widget right aligned to look more consistent. The column width will change according to the longest widget.

Risse’s picture

Issue tags: +Amsterdam2014
Anonymous’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll
ravi.khetri’s picture

FileSize
593 bytes

Re-rolled.

ravi.khetri’s picture

Status: Needs work » Needs review

Re-rolled.

YesCT’s picture

removing the needs reroll tag, since it applies.

Needs before and after screenshots added to the summary
and a
review.

no_angel’s picture

FileSize
96.49 KB

I am not able to reproduce the problem on a fresh download of D8 (see attached before)

Please advise if there is something I need to do.

no_angel’s picture

Issue summary: View changes
no_angel’s picture

Status: Needs review » Closed (duplicate)

1989470 Related
changed status to closed.

droplet’s picture

Issue summary: View changes
Status: Closed (duplicate) » Needs work

Please don't close it randomly. We still discuss for a right approach

LewisNyman’s picture

Status: Needs work » Postponed (maintainer needs more info)

I think no_angel couldn't produce the problem, can we confirm this is still a problem?

droplet’s picture

Component: Seven theme » CSS
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Needs work
FileSize
19.95 KB
14.68 KB
1.14 KB

@nod_ #47 worrying about the JS performance but Patch in Comment #57 is a difference approach that won't add extra JS execution time to Page Loading.

no_angel’s picture

I worked on this again and am able to reproduce the issue with the bug.patch applied.
no_angel:drupal admin$ git apply bug.patch
no_angel:drupal admin$ ls -al

Firefox crashed when I minimized the window Figure 1, after bug.patch


Applied patch 1890266-66_0.patch
no_angel:drupal admin$ git apply 1890266-66_0.patch and cleared cache



(use "git add ..." to include in what will be committed)

1890266-66_0.patch
bug.patch
sites/default/files/
sites/default/services.yml
sites/default/settings.php

no changes added to commit (use "git add" and/or "git commit -a")
no_angel:drupal admin$ git diff
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutt
index f089874..c4b5b61 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -33,16 +33,12 @@
.js .form-actions .dropbutton-widget {
position: static;
}
-.js td .dropbutton-widget {
- position: absolute;
-}
.js td .dropbutton-wrapper {
min-height: 2em;
}
.js td .dropbutton-multiple {
- padding-right: 10em; /* LTR */
- margin-right: 2em; /* LTR */
max-width: 100%;
+ float: right;
}
[dir="rtl"].js td .dropbutton-multiple {
padding-right: 0;
diff --git a/core/modules/field_ui/src/FieldConfigListBuilder.php b/core/modules
index 167d9f7..b347cf0 100644
--- a/core/modules/field_ui/src/FieldConfigListBuilder.php
+++ b/core/modules/field_ui/src/FieldConfigListBuilder.php
@@ -166,7 +166,7 @@ public function getDefaultOperations(EntityInterface $entity

if ($entity->access('update') && $entity->hasLinkTemplate("{$entity->entity
$operations['edit'] = array(
- 'title' => $this->t('Edit'),
+ 'title' => $this->t('Edit ettings settings settings'),
'weight' => 10,
'url' => $entity->urlInfo("{$entity->entity_type}-field-edit-form"),
);
@@ -180,7 +180,7 @@ public function getDefaultOperations(EntityInterface $entity
}

$operations['storage-settings'] = array(
- 'title' => $this->t('Storage settings'),
+ 'title' => $this->t('Storage settings settings settings settings settings
'weight' => 20,
'attributes' => array('title' => $this->t('Edit storage settings.')),
'url' => $entity->urlInfo("{$entity->entity_type}-storage-edit-form"),
...skipping...
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutt
index f089874..c4b5b61 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -33,16 +33,12 @@
.js .form-actions .dropbutton-widget {
position: static;
}
-.js td .dropbutton-widget {
- position: absolute;
-}
.js td .dropbutton-wrapper {
min-height: 2em;
}
.js td .dropbutton-multiple {
- padding-right: 10em; /* LTR */
- margin-right: 2em; /* LTR */
max-width: 100%;
+ float: right;
}
[dir="rtl"].js td .dropbutton-multiple {
padding-right: 0;
diff --git a/core/modules/field_ui/src/FieldConfigListBuilder.php b/core/modules
index 167d9f7..b347cf0 100644
--- a/core/modules/field_ui/src/FieldConfigListBuilder.php
+++ b/core/modules/field_ui/src/FieldConfigListBuilder.php
@@ -166,7 +166,7 @@ public function getDefaultOperations(EntityInterface $entity

if ($entity->access('update') && $entity->hasLinkTemplate("{$entity->entity
$operations['edit'] = array(
- 'title' => $this->t('Edit'),
+ 'title' => $this->t('Edit ettings settings settings'),
'weight' => 10,
'url' => $entity->urlInfo("{$entity->entity_type}-field-edit-form"),
);
@@ -180,7 +180,7 @@ public function getDefaultOperations(EntityInterface $entity
}

$operations['storage-settings'] = array(
- 'title' => $this->t('Storage settings'),
+ 'title' => $this->t('Storage settings settings settings settings settings
'weight' => 20,
'attributes' => array('title' => $this->t('Edit storage settings.')),
'url' => $entity->urlInfo("{$entity->entity_type}-storage-edit-form"),
~
(END)

no_angel’s picture

Issue tags: -Amsterdam2014

removed Amsterdam2104 tag.

no_angel’s picture

Issue summary: View changes
FileSize
126.99 KB

droplet’s picture

Thanks @no_angel but I remove your summary updates. That would confuse other developers.

droplet’s picture

droplet’s picture

Issue summary: View changes
geek-merlin’s picture

Status: Needs work » Needs review
FileSize
990 bytes

Patch flying in with a pure css solution that unifies the dropbutton width to that of the longest item.

geek-merlin’s picture

Patch flying in with a pure css solution that unifies the dropbutton width to that of the longest item.

This one is the correct one.

Status: Needs review » Needs work

The last submitted patch, 82: drupal-1890266-82-dropbutton-width.patch, failed testing.

star-szr’s picture

Test failures in:

ExpandDrupal\config\Tests\ConfigFormOverrideTest
ExpandDrupal\system\Tests\DrupalKernel\ContainerRebuildWebTest

But this is a CSS patch :) hitting retest.

Status: Needs work » Needs review

The last submitted patch, 74: bug.patch, failed testing.

timisoreana’s picture

On next pages dropdowns works like expected:
1)/admin/structure/menu
2)/admin/config/content/formats

On the next expanded dropdown is cut:
1)/admin/structure/types/manage/article/fields
manage article fields

2)/admin/structure/comment
comment types

3)/admin/structure/taxonomy
taxonomy

4)/admin/structure/types
content types

5)/admin/structure/contact
contact

In case of longer (or a few) word(s) in all described pages dropdown is cut
few words

droplet’s picture

Issue tags: +Needs u

There're 2 options now:

A: #57
B: #63

anyone from UX team can give some feedback ?

andypost’s picture

droplet’s picture

Last testing:

Both Patch #63 & #82 doesn't address the problem.

droplet’s picture

Issue summary: View changes
FileSize
744 bytes

Attach a patch for testing

Bojhan’s picture

Issue tags: -Needs usability review

My preference goes to #57, I dont know why we would want to expand the whole button.

geek-merlin’s picture

A test of #82 showed me that the css file to patch is
* not (anymore?) core/misc/dropbutton/dropbutton.css
* but core/themes/stable/css/core/dropbutton/dropbutton.css

droplet’s picture

I patched it myself during testing of #82 & #63.

When you reduce the screen width to some points, the menu still cut off.

lokapujya’s picture

I think the #57 route is the way to go.

Isn't part of the problem that the columns before the Operations column may push the dropdown off the screen at mobile screen widths? For example, the screenshot in the original issue description. In those cases, the user will either have to scroll to the right, or a new issue can be opened to rearrange that specific table.

If the drop down does fit on the screen, then clicking on it should show all the options (without needing to scroll) and THAT is what I think this issue should be about. So, I think #57 does that. It will extend the dropdown to the left on top of the other columns (while making a selection.)

Most of the time, the first operations drop down text is "Edit". The bug.patch sample is a little unrealistic because an operation name probably shouldn't be too long. So, I think design decisions should be made from real examples from Drupal Admin screens. Not sure how long the options might get in translated text.

Also, what screen width should the testing be done in? I think 320px.

geek-merlin’s picture

Rerolled #82 according to #94 to investigate this. If this can be done in css, it should be.

geek-merlin’s picture

Issue summary: View changes

Updated summary.

geek-merlin’s picture

After adjusting some non-dropbutton-related style, this patch does what it intended:
Dropbutton always has the width of the largest entry, not wider.

lokapujya’s picture

The #99 patch does what the patch intends to do. So, the next step here is to decide which of the proposed resolutions to pursue or to keep it as is.

droplet’s picture

Status: Needs review » Needs work
FileSize
22.36 KB

#99 even broken the normal menus

lokapujya’s picture

Right, the other problem with solution C is that some drop downs can be very wide, but only have the text "Edit" which would look funny.

joginderpc’s picture

Status: Needs work » Needs review

Buttons are view fine as per the given text in them, because their would be no much longer text that overlap the block. Please review this.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Maninders’s picture

Just use CSS approach to resolve the problem. Please review this patch. Screenshots are also attached with different screen sizes.

Maninders’s picture

Assigned: Maninders » Unassigned

Just use CSS approach to resolve the problem. Please review this patch. Screenshots are also attached with different screen sizes.

lokapujya’s picture

Issue summary: View changes

Basically, #105 is proposing to have word break in a dropdown?

Maninders’s picture

referring my #105 patch, just remove the repeat properties and put it generic. Please review this patch. No need of screenshots, effects are same as in #105 attached screenshots.

Manjit.Singh’s picture

I have reviewed the patch and test the UI locally on Linux.
Please check below screenshot, I have added the extra content to check the UI, But it looks good.

drop

But when there is simple text, I think it should be in single line. Dont know this issues is only in linux or other also. Please check the screenshot.

drop

But when i removing white-space: pre-line; it looks good.

drop

Maninders’s picture

Assigned: Unassigned » Maninders
Maninders’s picture

Assigned: Maninders » Unassigned
Status: Needs work » Needs review
FileSize
36.86 KB
36.96 KB

I have reviewed the patch again its working fine on all machines except Linux. So i changed according to that. Now its working fine on linux also. Please check the screenshots.
screenshot-linux
screenshot-linux
Now moving it's to Needs Review.

Maninders’s picture

In last comment i forgot to add patch, sorry for that.
Patch is attached now.

Manjit.Singh’s picture

Version: 8.1.x-dev » 8.2.x-dev
Issue tags: +Needs manual testing
brahmjeet789’s picture

FileSize
15.54 KB
22.19 KB

After apply patch #112 the drop down menu go to other side please check the screen shots.

brahmjeet789’s picture

Status: Needs review » Needs work
kostyashupenko’s picture

Assigned: Unassigned » kostyashupenko

Looks like this is related with bad styles for tables. I'll look on it soon

kostyashupenko’s picture

Assigned: kostyashupenko » Unassigned
Status: Needs work » Needs review
FileSize
38.21 KB
1 KB
861 bytes

Added some fixes. Screen below

After this patch on my side:
dropdown_117.png

brahmjeet789’s picture

FileSize
22.8 KB

@kostyashupenko : after apply your patch it works fine for me but there is a issue with header for some screen ,please check my screen shot. we have to work on this.

kostyashupenko’s picture

@brahmjeet789 about what kind of bug are you talking?

kostyashupenko’s picture

A small space between "Manage fields" and breadcrumbs ?

brahmjeet789’s picture

@kostyashupenko, I am talking about the header layout get distorted as i marked as red in my screenshot,please check.

Manjit.Singh’s picture

@kostyashupenko I think he is talking about this.

re-attaching screenshot.

d

Maninders’s picture

Maybe he is talking about the header background color. Which is not 100% covered. @brahmjeet789 Correct me if i am wrong.

Manjit.Singh’s picture

Status: Needs review » Needs work
FileSize
41.81 KB
53.8 KB
51.33 KB

I have captured some screenshots. Please check.

scroll

scroll

IMO, It is due to dropdown width which is creating a horizontal scroll on the screen.

@Maninder there is no issue with background color, i guess. If you check the screenshot, you can see that dropdown is slightly out from the body.

scroll

kostyashupenko’s picture

Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

Assigned: kostyashupenko » Unassigned
Status: Needs work » Needs review
FileSize
37.54 KB
41.7 KB
2.04 KB

We had this issue, because of too long words. Now property "word-break" will fix that issue. Also now all columns in all tables has the same width (if the screen width less than 600px). Patch and screens here

brahmjeet789’s picture

@kostyashupenko i can still find the same problem with header on responsive part for this, please check is it fine on Galaxy S5.

brahmjeet789’s picture

@kostyashupenko look at the New Screenshot.

brahmjeet789’s picture

kostyashupenko’s picture

Sorry, my mistake. Should be ok now. I've tested my last patch in IE, Chrome and FF. Everywhere it's ok

So i guess we should discuss smth about "how to improve current design for dropdowns"

andypost’s picture

droplet’s picture

Status: Needs review » Needs work

It isn't a good workaround.

1. It set max-width. On larger screen, it still wrapped the text. (whatever @media we did just based on limited prediction but do not scale for every sites)
2. the fixed max-width just designed for Core styling, let's say if you were taken .layout-container margin away. The menu will be rendered outside the windows. ( If we only designed for Core, opening the menu to left is fine)
3. You should try to test loooooong letter words, not short as #124

kostyashupenko’s picture

Issue tags: +Needs design
AaronChristian’s picture

FileSize
123.75 KB

I'd like to propose getting the D8 Style guide dropbutton redesign implemented then. This would be a great opportunity to do some user validation and testing on the new button.

https://groups.drupal.org/node/283223#Split_Buttons_and_Dropbuttons

This should eliminate the issues noted above, as well as take care of RTL/LTR, mobile devices. I would also suggest keeping in mind accessability and mobile gestures on this button.

Extended Buttons

droplet’s picture

D8 Style guide for dropbutton is exactly this: http://v4-alpha.getbootstrap.com/components/dropdowns/
which also doesn't cover the edge case we dealing with here.

Patch #130 provided a little bit better workaround than now. We can consider to accept it (as noJS workaround). And a follow-up issue for best solution with JS.

For JS, we can load http://tether.io/ to deal with the positions like Bootstrap does in some components.
(Patch #57 is a lightweight version)

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Pancho’s picture

Let me summarize:

  • A JS-only solution is unacceptable if the same can be done in CSS
  • Word-breaking as proposed in the last few patches needs to be further investigated and discussed and is beyond scope here.

Therefore I went back to the last patch by @axel.rutz in comment #99. His patch ensure the dropbutton is always exactly as wide as the widest element. This however doesn't fix the initial issue (nor my more or less duplicate issue #3029468: Dropbutton field pushed out of the table if no label set) about long dropbuttons being pushed out of the table on crowded pages.

After quite some work, I got it tackled by finally letting the button-wrapper flow inline while accordingly adjusting the child elements.
This new approach fixes the original issue with long multiple dropbuttons being pushed out as well as the mine with single dropbuttons being pushed out. It also slightly reduces the superfluous space taken by short dropbuttons, so the "Operations" column may now move a bit further to the right border (a step towards #1849750: Minimize all "Operations" columns width).

The only thing I'm not yet completely convinced is whether we really want to keep a dropbutton's size fixed at the size of its largest child element, even if closed. For very long child elements this looks a bit weird. If we don't want to change this aspect, we could leave out the @axel.rutz part of the patch.

Further notes:

  • The Views UI admin interface is quite different, so I kept everything as is there.
  • Positively tested in Bartik as well.
  • For now I didn't duplicate the changes in core/misc/dropbutton/dropbutton.css in order to keep the patch short.

Now the screenshots:

Single dropbutton: Multiple dropbutton: Both types
on filter formats page:
Before:
Single dropbutton before
Before:
Multiple dropbutton before
Before:
Mixed dropbuttons before
After:
Single dropbutton after
After:
Multiple dropbutton after
After:
Mixed dropbuttons after

 

Veery long dropbutton closed: Veery long dropbutton open:
Before:
Very long dropbutton before
Before:
Very long dropbutton before
After:
Very long dropbutton after
After:
Very long dropbutton after
geek-merlin’s picture

I think a pure css approch is disirable and feasible.
But i'd propose (currently don't have time for that) to iterate the css so that
* a closed dropbutton has the width of the visible item (probably by making the others display:none, not visibility:hidden) (everything else is weird...)
* an open dropbutton has the width of the then visible items (so is wider)

Pancho’s picture

Assigned: Unassigned » Pancho
Status: Needs review » Needs work

No problem, I kind of expected that because of the "veery long dropbutton." I had that before I took into account your patch in #99, and will look if I can still find the version that accomplishes that.

Pancho’s picture

I first tried a very simple approach that removes the widget's absolute positioning, so even if the widget grows by opening, the table would reflow to give the widget the needed space. I'm sharing the patch with you though I'm not happy with the outcome, as the sudden reflow makes elements move unruly, so this is not something we want to do. We also need to make sure the column doesn't grow, because otherwise that space would be fully consumed by the dropbutton.

Pancho’s picture

Status: Needs work » Needs review
FileSize
1.9 KB
276.08 KB
185.68 KB

So if:

1. we want the dropbutton widget to be small at the beginning, but growing with its content
2. we don't want the dropbutton widget take more space than necessary
3. we don't want all other elements to shift unruly, so don't want a full table reflow
4. we don't want the dropbutton widget to grow out of the right page border so it doesn't trigger a horizontal scrollbar

then the only and IMHO certainly our best option is making the open dropbutton widget a fly-over towards the left side.

The details are tricky, too. Now again it's only the heading that does give the column a certain size. In some cases (and languages) the default operation will however have a longer name than the heading, and we don't want the closed widget to already fly over the column to the left. So we need a certain fixed size, and 10 em seemed a good compromise. Now again the heading needs to be right-aligned because otherwise it wouldn't be aligned at all.

The result works fine and looks good in almost every constellation. To get it 100% right I however fear we need JS to calculate the dropbutton width and set the column width accordingly. Unless there is a CSS trick I don't know yet...

See also these two GIFs:

Before:
before

After:
after

Pancho’s picture

Actually 7em are enough.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

oliverpolden’s picture

Thanks for your work on this.

I've been using a dropbutton in a views table. I've applied your patch and found that the dropbutton is the size of the first element within it and overlaps the column(s) to the left when closed. This is happening in both Bartik and Seven themes.

Configuration of the drop button in views would be nice so you can choose to set the closed width and if not set, then to default to the width of the first element.

Pancho’s picture

Status: Needs review » Needs work

Thanks for your feedback. We certainly won't manual add configuration options, but have to get this right using CSS and - if necessary - JS. I will do some testing.

geek-merlin’s picture

geek-merlin’s picture

And that one looks like it would solve this and a lot more...

batkor’s picture

subscribe

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

komalk’s picture

#146 failed to apply on 9.1.x.
Re-rolled the patch

komalk’s picture

Status: Needs work » Needs review
FileSize
3.83 KB
1.54 KB

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Ruchi Joshi’s picture

FileSize
23.61 KB

Applied patch#156 on drupal 9.2, issue is checked with the combination of theme Bartik as default and Seven as admin but drop button text is not retaining its size. Requires to fix. so moving it to "Needs Work"
Screenshot attached.

Steps:

1. Visit /admin/appearance and set Bartik as default and Seven as admin theme.
2. Open this file on local- core/modules/field_ui/src/FieldConfigListBuilder.php
3. Edit it and add any long string under title, this way--> 'title' => $this->t('Storage settings xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'),
4. Visit /admin/structure/types/manage/article/fields on responsive version.

Ruchi Joshi’s picture

Status: Needs review » Needs work
komalk’s picture

Assigned: Pancho » Unassigned
Status: Needs work » Needs review
FileSize
5.73 KB
1.58 KB
108.7 KB
111.49 KB

Attached screenshot for reference.
Please review the patch.

Status: Needs review » Needs work

The last submitted patch, 160: 1890266-160.patch, failed testing. View results

djsagar’s picture

FileSize
55.53 KB
57.6 KB
63.15 KB

Hi komalk,

Patch is applied and resolved the issue just need to update patch.

Thanks!

tanubansal’s picture

Patch 'PHP 7.3 & MySQL 5.7 27,821' is working fine on 9.1
RTBC+1

djsagar’s picture

Status: Needs work » Needs review

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mitthukumawat’s picture

I have applied the patch #160 and it is working fine now. The align of text in dropdown is appearing fine.

VladimirAus’s picture

Status: Needs review » Needs work
FileSize
3.83 MB

Here's what I'm getting after apply the patch on roles pages /admin/people/roles

  • In Claro the bahaviour is still jumpy
  • In Seven the dropdown is aligned right which doesn't solve the width issue (column header is still aligned right)

Tested with

  • Safari 14.1.1 (MacOS Big Sur 11.4 arm64)
  • Firefox 90.0 (MacOS Big Sur 11.4 arm64)
  • Chrome 91.0.4472.164 (MacOS Big Sur 11.4 arm64)
  • Drupal 9.2.1
naveen433’s picture

I am working on this

VladimirAus’s picture

Thanks @naveen433.
I created issue here: https://www.drupal.org/project/drupal/issues/3224254

chetansonawane’s picture

Assigned: Unassigned » chetansonawane
chetansonawane’s picture

Assigned: chetansonawane » Unassigned

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.