The new issue that seem to appear are :
1. If single field dropdown is selected,
a. It follows standard when text character length is normal without too much spacing.
b. It follows standard when text character length is not normal without any spacing between words in dropdown button
c. It does not follow when text character length is long and has spacing between words.
2. In multi field dropdown selection,
a. It follows proper spacing standards in relation to other table rows only when Content: Node operations bulk form
is selected
Content: Node operations bulk form
is selectedBulk form view:
Bulk form dropdown open:
b. It breaks standard view if any other field besides Content: Node operations bulk form
is selected and when the first field contains anything unique such as Title, Author Name
Content: Node operations bulk form
is selected and when the first field contains anything unique such as Title, Author Name
Standard redirect dropdown broken view:
Transparent dropdown broken view:
c. It breaks standard view when any field that cannot be redirected is selected; these fields are visible with a transparent bg, without following any spacing, positioning standards. Similarly if fields that can be redirected appear they appear normally.
Normal drop multi field:
Bulkdrop multi field:
Cannot reproduce this issue in Drupal 11.x Claro, there seems to be some alignment issue to the weight selection dropdown when admin theme is set to Olivero.
Paragraph view for Claro:
Paragraph view for Olivero:
I also found the steps to recreate the issue unclear, so,
Steps to reproduce
- Install Paragraph module form here → .
- Enable and install Paragraphs and Paragraphs Type Permissions from Admin --> Extend
- Now go to Admin>Structure --> Paragraph types. Add a Paragraph type. Choose a label name. Save and Manage fields.
- Select create a new field --> File upload --> Give it a label and select Image type --> Save settings(to get the same paragraph structure with image input as suggested by OP)
- To add paragraph type to article content type, go to Structure --> Content types --> Select Manage field operation for Article --> Create a new field --> Select Paragraphs & Continue --> Add a label name, Continue --> Scroll down to Paragraph types, Select the paragraph type you created in Step 3 & save settings
- Now go to Admin --> Content --> Add content --> Article to add content in article content type.
Followed all the steps to reproduce, was not able to in 11.x.
Made the suggested changes
The issue of Global dropdown getting pushed out of the table does not seem to be reproduced in 11.x, but new issues has taken its place altogether.
Steps taken to reproduce the issue taken from #28.
1. In single field dropdown is selected,
a. It follows standard when text character length is normal without too much spacing.
b. It follows standard when text character length is not normal without any spacing between words in dropdown button
c. It does not follow when text character length is long and has spacing between words.
2. In multi field dropdown selection,
a. It follows proper spacing standards in relation to other table rows only when Content: Node operations bulk form
is selected
Content: Node operations bulk form
is selectedBulk form view:
Bulk form dropdown open:
b. It breaks standard view if any other field besides Content: Node operations bulk form
is selected and when the first field contains anything unique such as Title, Author Name
Content: Node operations bulk form
is selected and when the first field contains anything unique such as Title, Author Name
Standard redirect dropdown broken view:
Transparent dropdown broken view:
c. It breaks standard view when any field that cannot be redirected is selected; these fields are visible with a transparent bg, without following any spacing, positioning standards. Similarly if fields that can be redirected appear they appear normally.
Normal drop multi field:
Bulkdrop multi field:
This issue still persists in both Claro and Olivero themes.
While in both of them the layout content overflows, in my testing it is much worse with olivero; it makes the overflowing content illegible with the layout content not taking on white background color like it does in claro.
Kristen Pol → credited akashdab → .
The second issue of tags overlapping with process icon does not seem to occur anymore. Link
The issue of tags overlapping with process icon does not seem to occur anymore. Link
Regarding the issue being a duplicate of #3199601 🐛 Autocomplete loading text overlaps long labels Needs work in comment #20; Issue #3199601 🐛 Autocomplete loading text overlaps long labels Needs work has 2 problems, of which the second one seems to be same as the one discussed here.
Steps to reproduce -
- Appearance -> Apply Olivero theme
- Enable Layout Builder module
- Home>Administration>Structure>Content types>Article>Manage display> Manage layout >Add Block > Create content block (10.1 and up)/ Create custom block(9.5.x)
- 4.Fill in title, body, within body insert an image
Could not reproduce this issue for version 9.5.x, 10.1.x, 11.x.
As highlighted by many before, there is a lack of space after the Edit dropdown to accommodate the throbber inline.
As it stays right now, the entire Edit dropdown field is 128px in width, of which 96px is the width of the dropdown element, 32 px is the width shared onto either sides of the dropdown.
To successfully include the throbber inline there needs to be at least 42px space after the dropdown, as that is the width the throbber takes.
To tackle this there are 3 approaches we can take,
- Involves redistributing the width taken by the table header.
- Involves redistributing the width taken by the table header, and
- 2(a). reducing padding of the Edit dropdown element.
2(b). reducing padding of the Edit dropdown element and reducing margin taken by ajax throbber.
1. Redistributing the width taken by the table header.
- Reduce the width of View name table header from 20% to 15%.
- In turn allocate the free space to Operations table header, increasing it from 10% to 15%.
- Doing this increases the width of Edit dropdown from 96px to approximately 145px, consequently making enough space for the throbber.
- Method 1 Plain View
-
Method 1 Calculated
2(a). Redistributing the width from the table header and reducing padding of edit dropdown.
- This one takes ideas from patch-4, reducing the width of View name table header from 20% to 17%.
- Allocating the free space to Operations TH, increasing its width from 10% to 13%.
- Reducing the padding from TD of Operations TH, from 16px to 7px (or .45 rem ~ 7px)
-
Method 2(a) Plain View
-
Method 2(a) Calculated
2(b). Redistributing the width from the table header, reducing padding of edit dropdown and reducing margin taken by ajax throbber.
- Reducing the width of View name table header from 20% to 17%.
- Allocating the free space to Operations TH, increasing its width from 10% to 13%.
- Reducing the padding from TD of Operations TH, from 16px to 10px (or .625rem)
- Reducing the margin from ajax throbber from 12px to 9px (0.5625rem).
Method 2(b) Plain View
Method 2(b) Calculated
I also think the addition of margin: 0.1rem;
in media-library-item__attributes
does not make much difference to the solution, rather it misaligns the title towards the top right corner. Video showing how.
I think the before/after images attached previously did not highlight the issue and the solution, uploading a new set of images for better consideration.
Adding before/after screenshots.
Updated summary as of comment #14.
Positioning standards adopted from here.
- Added css logical properties
- removed unneeded properties that have browser prefixes
- did not alter unit-allowed-list
and ignoreFiles