Claro theme + field_group seems to hide content of dropbutton

Created on 8 June 2021, about 3 years ago
Updated 17 April 2024, 2 months ago

Problem/Motivation

When using the Field Group module with Paragraphs module with a setting of vertical tabs the dropdown button to select the list is not appearing thereby there is no option to choose other paragraph types other than the default one.

Steps to reproduce

Install modules:

  • paragraphs
  • field_group
  1. Create a few paragraphs (about 3-4).
  2. Create a content type with a paragraph reference field. Make it so all paragraphs are selectable.
  3. Add a field_group tabs (vertical) and tab.
  4. Put the paragraph field created in step 2 under this tab.
  5. Try to add a page with paragraph 4.

Result: The dropdown button is not visible at all, thereby not able to select other paragraph types other than the defaukt one.
Expected: Be able to select any item in the dropdown.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro 

Last updated 3 days ago

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India Shubham Sharma 77

    Applied patch #29 applied successfully in drupal-10.1.x-dev.
    For ref sharing screenshots. Can be moved to RTBC.
    RTBC +1

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    #29 introduced a new solution but it does not reflect the issue summary.

    Also once 1 set of screenshots have been added any additional screenshots of the same patch are considered duplicative work and don't receive credit. So please not more screenshots.

  • 🇮🇳India Gauravvv Delhi, India

    Updating attributions

  • 🇬🇧United Kingdom kiwimind

    Having taken a look at the D9 patch above, it seems that there's a simple way of amending the styling without changing much else by removing a couple of things.

    Please see attached patch for 9.5.x

  • 🇺🇸United States michael.acevedo@pomona.edu

    After the patch #36, paragraphs still go out of container.

  • 🇺🇸United States michael.acevedo@pomona.edu

    After patch #36, paragraphs still go out of container.

  • 🇳🇱Netherlands nienkevanpoppel

    @acemichael your last screenshot is likely caused by a wysiwyg-editor (although it is not visible in your screenshot). This patch for the ckeditor5 will fix the overflow issue.

  • Status changed to Needs review 8 months ago
  • last update 8 months ago
    Patch Failed to Apply
  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update 8 months ago
    30,341 pass
  • Status changed to Needs work 8 months ago
  • 🇺🇸United States smustgrave

    Don't think we should be patching the ckeditor library.

    Also is this reproducible in core?

  • 🇺🇸United States joshuasosa

    I did testing with #36 using the scenario in the original post as well as testing other areas with vertical tabs (account settings, text format settings, content type settings, media type edit, block layout settings) and with some other modules that use vertical tabs (google_tag, entity_embed text format settings, chosen, slick). It seems to work pretty well.

    #37 might be more paragraphs related. It may have to do with paragraphs setting a specific size attribute on text fields which goes beyond the container if the screen size is small. But I'd rather see that paragraph content overflow the container so I can actually see the whole thing rather than it get cut off.

    Regarding the patch in #40, if there's a vendor library to fix, those fixes should probably go in the vendor's issue queue instead.

    I tried checking for vanilla cases and am unsure if the issue can be replicated without contrib help or custom code. But the issue of vertical tabs hiding overflow does stem from Claro. By comparison, it doesn't look like accordions hide overflow. The issue may not affect vanilla, but it does impact certain contrib modules like in the original scenario.

  • First commit to issue fork.
  • @ameymudras opened merge request.
  • Status changed to Needs review 7 months ago
  • Status changed to Needs work 7 months ago
  • 🇺🇸United States smustgrave

    There are multiple patches and MRs that need to be cleaned up now, solution doesn't fully match what's proposed.

    Before/after screenshots should be added to the issue summary.

  • I tried to apply some of the patches which are mentioned above on the latest Drupal version 11 but the patch threw some errors.
    So I use the recent MR 5376 which has been applied cleanly and the hidden dropdown of a paragraph is now completely visible but the whole paragraph section is going out of the container which needs to be inside the parent container. See -

    Before Patch

    After Patch

  • I think for the paragraph section issue which is going out of the container will fixed in this - https://www.drupal.org/project/drupal/issues/3145188 🐛 Paragraphs fields cause overflow of content forms in Claro Needs work (similar issue)

  • Status changed to Needs review 6 months ago
  • Status changed to Needs work 6 months ago
  • 🇺🇸United States smustgrave

    Moving to NW based on the after screenshot, I see that the content is now breaking out of the container.

  • 🇮🇳India ameymudras

    I tested the solution again on 11.x and I am not able to replicate the issue mentioned in #48. Please find the screenshot attached

  • 🇮🇳India AkshayAdhav Pune, India 🇮🇳

    I tried with recent 2-3 patches along with MR from @ameymudras. I can say that it's not fixing the issue for nested paragraphs.
    I can think of 2 solutions:

    1. If we need to fix this issue in Claro theme: increase the available area of the content edit form (i.e. layout-region--node-main) and make it 100%, so that paragraphs can accommodate properly in it. The reason is that nested paragraphs are being placed in <table> tag. These table tags have a width of 100% and which is overflowing outside the available area.

    2. As in most places <table> creates such overflow issues. It will be great to change the structure of nested paragraphs by using other tags than the <table> tag. And restructure it. I know this is a very time-consuming solution that needs to be handled at the Paragraphs module level.
  • 🇮🇳India AkshayAdhav Pune, India 🇮🇳
  • 🇨🇭Switzerland saschaeggi Zurich

    Removing overflow: hidden; will lead to more bugs than solving unfortunately.

    The culprint of the issue is that the dropdown is not context aware (it opens towards the bottom instead of the top).
    So to fix this more generally as it can also happen on other layouts like in tables we should solve the problem around the dropdown itself.

  • 🇺🇸United States joshuasosa

    I haven't tried on 11 yet, but on 9 and 10 the issue was more than just the drop downs. It would occur for tables and other fields that get pushed out of view. The fix should be more general to cover all cases, not just a drop-down fix.

  • 🇺🇸United States bakulahluwalia Houston

    The patch #29 is not working with 10.2.0 release. The code on line 275 is significantly changed.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MariaDB 10.3.22
    last update 5 months ago
    Patch Failed to Apply
  • 🇺🇦Ukraine v.dovhaliuk

    Rerolled patch for the compatibility with 10.2.2 release.

  • Hello there,
    I've faced the same issue on my D10 instance and looked for the issue and landed upon another issue which seems to be stating this as an issue of Claro theme or the Paragraphs module, but after digging up quite a bit and trying it out with all possible combinations of theme and paragraphs module and field group module, it has come to by notice that the problem is neither with any of the themes nor with the paragraphs module, rather the issue is arising because of field group module.
    I've talked about this elaborately there:
    https://www.drupal.org/project/field_group/issues/3318730 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
    https://www.drupal.org/project/field_group/issues/3318730#comment-15551915 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
    Also attaching the same screenshots here for quick reference

    On my observation the issue starts from the disappearance of the dropdown button itself and some structural changes which is happening because of the field group module. I'm not changing the issue component as there is already an issue with the same, so just adding that as a parent issue and related issue. I think it'll be better if we mark this as a duplicate issue as we're trying to address the same on
    https://www.drupal.org/project/field_group/issues/3318730 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
    If you land on any other findings feel free to change accordingly. Though updated the issue summary with my latest findings for a quick overview!

    Also not sure how you're reproducing the issue on D11, cause I found that these said modules are not yet ready for D11.

Production build 0.69.0 2024