With Firefox, the small expand/collaps triangles on collapsible fieldsets are not displayed:

It should look like this:

CommentFileSizeAuthor
#22 edge-after-patch.jpeg24.18 KBVidushi Mehta
#22 mac-ff-after-patch.jpeg21.93 KBVidushi Mehta
#22 firefox-after-patch.jpeg19.37 KBVidushi Mehta
#21 interdiff-12-21.txt901 bytesvolkerk
#21 2873390-21.patch821 bytesvolkerk
#20 no-class-added.jpeg170.57 KBVidushi Mehta
#20 class-added.jpg170.24 KBVidushi Mehta
#17 details-msedge.jpg22.54 KBvolkerk
#14 arrow-on-collaps-firefox-2873390-12.patch821 bytesVidushi Mehta
#11 firefox-arrow.jpg18.42 KBVidushi Mehta
#11 arrow-on-collaps-firefox-2873390-11.patch777 bytesVidushi Mehta
#9 Screenshot from 2017-05-13 16-21-38.png8.14 KBlauriii
#8 has-triangles.png35.7 KByoroy
#8 no-triangles.png79.53 KByoroy
#7 Firefox with Arrows.png38.87 KBBSpeel
#5 arrow-on-details-block-firefox-2873390-5.patch369 bytestracipotocnik
#4 arrow-on-details-block-firefox-2873390-4.patch777 bytestracipotocnik
#2 Firefox No Arrows.png40.1 KBBSpeel
#2 Chrome with Arrows.png41 KBBSpeel
seven_error_details_ff.jpg25.74 KBmgerbault
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mgerbault created an issue. See original summary.

BSpeel’s picture

BSpeel CreditAttribution: BSpeel as a volunteer commented
Issue tags: +cross browser compatibility
FileSize
Chrome with Arrows.png41 KB
Firefox No Arrows.png40.1 KB

I've confirmed the arrows do exist in Chrome (57) and Safari (10) but they do not appear in Firefox (53) on a mac. The issue in question is while adding or editing a node the right sidebar. See attached screenshots from Chrome and from Firefox.

tracipotocnik’s picture

tracipotocnik CreditAttribution: tracipotocnik as a volunteer commented

I am working on this issue at Drupalcon Baltimore

tracipotocnik’s picture

tracipotocnik CreditAttribution: tracipotocnik as a volunteer commented
FileSize
arrow-on-details-block-firefox-2873390-4.patch777 bytes

Patch #5 should replace this one. Found a simpler fix.

tracipotocnik’s picture

tracipotocnik CreditAttribution: tracipotocnik as a volunteer commented
FileSize
arrow-on-details-block-firefox-2873390-5.patch369 bytes

Created a patch to solve the arrow display issue on Firefox.

Firefox needs the summary block to be display: list-item for the arrow to show.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

tracipotocnik’s picture

tracipotocnik CreditAttribution: tracipotocnik as a volunteer commented
Status: Active » Needs review

Firefox displays the arrow when the summary field's arrow only when the display is set to list item. See docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

BSpeel’s picture

BSpeel CreditAttribution: BSpeel as a volunteer commented
FileSize
Firefox with Arrows.png38.87 KB

I checked it based on patch #5 in firefox and it does seem to be working. I checked a few different spots across the site (in Firefox, Chrome, and Safari) and didn't see any regressions, so presuming all the tests pass +1 RTBC.

yoroy’s picture

yoroy CreditAttribution: yoroy commented
Version: 8.3.0 » 8.4.x-dev
Assigned: Unassigned » lauriii
Category: Feature request » Bug report
Issue summary: View changes
FileSize
no-triangles.png79.53 KB
has-triangles.png35.7 KB

I've been noticing the same. I've tested the latest patch on simplytest.me and it fixes the issue in Firefox & FirefoxNightly. Maybe @lauriii can say something about the approach for this fix.

With 8.3 out, all fixes go in 8.4-dev first, so setting the version to that. It's also a (visual) bug so changing category as well. And updated the issue summary a bit to illustrate the problem and expected fix.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii as a volunteer commented
Assigned: lauriii » Unassigned
Issue summary: View changes
Status: Needs review » Needs work
FileSize
Screenshot from 2017-05-13 16-21-38.png8.14 KB

The technical implementation of the fix looks great! Thanks @tracipotocnik!

However, I think we will still have to adjust the positioning of the arrow since it seems to be slightly off.

yoroy’s picture

yoroy CreditAttribution: yoroy commented

Agreed, the closed position is a little bit too far down. Expanded traingle looks good to me.

Vidushi Mehta’s picture

Vidushi Mehta CreditAttribution: Vidushi Mehta at gai Technologies Pvt Ltd commented
Status: Needs work » Needs review
FileSize
arrow-on-collaps-firefox-2873390-11.patch777 bytes
firefox-arrow.jpg18.42 KB

As per the above discussion I am adding a patch with screenshot.

Status: Needs review » Needs work

The last submitted patch, 11: arrow-on-collaps-firefox-2873390-11.patch, failed testing. View results

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented
Issue tags: +Needs reroll

Latest patch needs a re-roll. Make sure to take pull when will you start creating patch.

Vidushi Mehta’s picture

Vidushi Mehta CreditAttribution: Vidushi Mehta at gai Technologies Pvt Ltd commented
Status: Needs work » Needs review
FileSize
arrow-on-collaps-firefox-2873390-12.patch821 bytes

Here is a re-rolled patch. Hope it works.

jofitz’s picture

jofitz CreditAttribution: jofitz at ComputerMinds commented
Issue tags: -Needs reroll

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.

volkerk’s picture

volkerk CreditAttribution: volkerk commented
FileSize
details-msedge.jpg22.54 KB

Unfortunately, this does not look good on Microsoft Edge.

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.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Needs review » Needs work

Based on #17 this still needs work

Vidushi Mehta’s picture

Vidushi Mehta CreditAttribution: Vidushi Mehta at gai Technologies Pvt Ltd commented
FileSize
class-added.jpg170.24 KB
no-class-added.jpeg170.57 KB

I checked this issue on all browsers on Windows and Mac. I found that the arrows are not looking good on Edge and IE as mentioned by #17 other than that on all browsers it looks good on Windows and Mac. On Edge and IE there's a class added which overrides the patch css and that class I didn't found on other browsers. I took a screenshots for that which shows the class added on Edge and IE and not on other browsers. So we should look properly on this so that the class which is added won't affect on other sides.

volkerk’s picture

volkerk CreditAttribution: volkerk commented
Status: Needs work » Needs review
FileSize
2873390-21.patch821 bytes
interdiff-12-21.txt901 bytes

Imho this is an firefox issue only, so add a special case for it and leave webkit, ms, etc. on their default.

Vidushi Mehta’s picture

Vidushi Mehta CreditAttribution: Vidushi Mehta at gai Technologies Pvt Ltd commented
Status: Needs review » Reviewed & tested by the community
FileSize
firefox-after-patch.jpeg19.37 KB
mac-ff-after-patch.jpeg21.93 KB
edge-after-patch.jpeg24.18 KB

Reviewed the patch. #21 fixed the issue on all browsers. PFA the screenshots.

Vidushi Mehta’s picture

Vidushi Mehta CreditAttribution: Vidushi Mehta at gai Technologies Pvt Ltd commented
tstoeckler’s picture

tstoeckler
he/him
Primary language German
Location Essen, Germany
CreditAttribution: tstoeckler at bio.logis Genetic Information Management GmbH commented

This seems like a duplicate of #2886904: display: block for details/summary hides drop arrows in Firefox (normalize.css update), no?

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Acro Commerce commented
Status: Reviewed & tested by the community » Closed (duplicate)

Yep this is a duplicate of #2886904: display: block for details/summary hides drop arrows in Firefox (normalize.css update) also the fix there is more along the right lines as this is not a seven only issue.