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.

Files: 

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
PASSED: [[SimpleTest]]: [MySQL] 49,911 pass(es). View

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
PASSED: [[SimpleTest]]: [MySQL] 49,725 pass(es). View

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

FileSize
2.4 KB
PASSED: [[SimpleTest]]: [MySQL] 50,038 pass(es). View

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

FileSize
818 bytes
2.65 KB
FAILED: [[SimpleTest]]: [MySQL] 53,337 pass(es), 1 fail(s), and 0 exception(s). View

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

FileSize
2.65 KB
PASSED: [[SimpleTest]]: [MySQL] 53,304 pass(es). View

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

edrupal’s picture

Status: Needs work » Needs review
Cottser’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
FAILED: [[SimpleTest]]: [MySQL] 53,724 pass(es), 1 fail(s), and 0 exception(s). View

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.

Cottser’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.

Cottser’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
PASSED: [[SimpleTest]]: [MySQL] 53,760 pass(es). View

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

edrupal’s picture

FileSize
2.57 KB
2.44 KB
PASSED: [[SimpleTest]]: [MySQL] 53,711 pass(es). View

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

tim.plunkett’s picture

Issue tags: +Needs manual testing

Tagging.

Cottser’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.

Cottser’s picture

Issue summary: View changes

added drupal/admin/structure/taxonomy

YesCT’s picture

updated issue summary remaining tasks section.

edrupal’s picture

FileSize
1.82 KB
2.51 KB
PASSED: [[SimpleTest]]: [MySQL] 53,620 pass(es). View

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

YesCT’s picture

FileSize
1.64 KB
2.51 KB
PASSED: [[SimpleTest]]: [MySQL] 53,637 pass(es). View

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.

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?

Cottser’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.

Cottser’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

Issue tags: +Needs manual testing
FileSize
1.45 KB
2.59 KB
PASSED: [[SimpleTest]]: [MySQL] 54,065 pass(es). View

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

mdrummond’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

klonos’s picture

Issue summary: View changes
Related issues: +#1870944: [Meta] Mobile friendly admin pages, +#1914800: Dropbutton width is smaller than longest item
droplet’s picture

FileSize
9.87 KB
3.07 KB
PASSED: [[SimpleTest]]: [MySQL] 63,113 pass(es). View

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
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 77,586 pass(es). View
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
b0unty’s picture

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

FileSize
593 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,908 pass(es). View

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
FAILED: [[SimpleTest]]: [PHP 5.5 MySQL] Unable to apply patch bug.patch. Unable to apply patch. See the log in the details link for more information. View

@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
axel.rutz’s picture

Status: Needs work » Needs review
FileSize
990 bytes
PASSED: [[SimpleTest]]: [PHP 5.5 MySQL] 103,226 pass(es). View

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

axel.rutz’s picture

FileSize
1016 bytes
PASSED: [[SimpleTest]]: [PHP 5.5 MySQL] 103,912 pass(es). View

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.

Cottser’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

axel.rutz’s picture

Added last patch #82 to summary.

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.

axel.rutz’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.

axel.rutz’s picture

FileSize
1.72 KB

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

axel.rutz’s picture

Issue summary: View changes

Updated summary.

axel.rutz’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

Looks good

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.