Widget for multivalued file field overlaps (3.x)

I don't know much scss so I can't proceed any further to address your requirements. Someone more experienced should make a commit to the MR so that the patch is implemented properly.

Waiting for an RTBC here. Thanks!

I've tested the MR and while it does fix what it was trying to, I feel like we should address that the Alternative Text textbox, description and remove button can overflow outside if the browser window gets too small. Or should this be another issue of its own?

I´ve tested the MR !548 and it fixes my Problem!

Because of a nesting within a paragraph I was not able to click the button for further elements due to the bug.

Applying the patch makes the UI conform to my expectations, thank you very much. I would suggest the RTBC Status.

I think the drag button should be in middle instead of top. I am working on it to fix.

Please review the changes.

Before:

After:

Noticed a couple of issues:

1. The layout breaks on mobile and iPad resolutions.
2. The "Remove" button is too close to the title and alt fields.
3. It would make more sense to display the image name below the image.

Fixed mobile and iPad resolutions. Also aligned remove button and image name.
Please review.

Before:

After

HI @mudasirweb, Thanks for your work however, I have a couple of doubts that I would like to clarify

1. Here below i attached ss for Single image field. So in case for multiple image field we should also maintain this design and try not to put the image title at the bottom.

2. Could you please compile the SCSS file thoroughly? It seems to be causing a pipeline failure.

Fixed pipeline failure.

Hi @mudasirweb,

I noticed that the image title is still positioned at the bottom. As I mentioned in #21, it should maintain integrity with the single image field. If I am mistaken, could someone kindly verify it?

Moved image title to top in-order to maintain integrity with the single image field.

Hi all, I've tried replicating the issue, and it reproduced. I've applied the provided MR as a patch, and it applied cleanly without any errors. After applying the patch, the multivalued image field overlap issue got resolved successfully, along with the mentioned issues in the comment #17. Now, the multivalued image fields occupying the required space and are not blocking the usage of multivalued fields, as mentioned by @piridium.

Thanks to @mudasirweb and @sandip-poddar for resolving further designing issues while using this theme. Initially, the drag handler is center-aligned for the theme for all fields/tables, so it would be better if consistency is maintained for the theme. As changes made for the handler are not affecting the other functionality while using the theme, hence moving the issue to RTBC. I've attached the screenshots of before and after fixes for reference.

Thanks!

Hi all I attempted to replicate the issue, and it still occurred even after applying #3. I then applied the provided PR, and it was applied cleanly without any errors. After applying the PR, the multivalued image field overlap issue was successfully resolved, along with the issues mentioned in comment #17. The multivalued image fields no longer interfere with the use of multivalued fields.

Result #3 Patch
https://www.drupal.org/files/issues/2025-04-15/%233-patch.png

Result after PR 3493765-widget-for-multivalued
https://www.drupal.org/files/issues/2025-04-15/Issue-fork-3493765-widget...

Can someone please take a look.

Hi @piridium, I tested MR608 and I’m still seeing the Remove button overflowing the border, and the image along with the drag handle are misaligned.

It looks like the issue stems from some internal gaps and margins within the image widget itself. I don’t believe align-self: center will resolve this.

That said, it no longer interferes with the use of multivalued fields, so I think MR568 is a good solution for now.

Screenshot after applying MR608
https://www.drupal.org/files/issues/2025-04-15/MR608.png

Screenshot after applying #3
https://www.drupal.org/files/issues/2025-04-15/%233-patch.png

Screenshot after Applying MR568
https://www.drupal.org/files/issues/2025-04-15/MR-568.png

Thanks for the patch from gin-3493765 ‘MR !608’ this works perfectly for me!
Thank you very much!

Hi @mudasirweb, the overlapping issue is resolved by the MR 608 and align-self: center is used here to center the drag button that is totally correct. Now you are coming with the issue of responsive that is okay but the previous MR 548 fixes the responsive issue but it brings more issues that @piridium mentions in the MR with a image. I think we can go with the MR 608 it is fine. If we want to fix the responsive issue i observed width: 1px is applied to the td.file-operations-cell. This causes the input tag inside it overflow. Now this css is coming from claro. If somehow we remove this width: 1px then our job is done. See the image i have attached then it will be clear.

But in my point of view the main motive of this issue was to resolve the overlapping issue See this image and that gets fixed by the MR 608.

cc: @piridium

This is the issue that i was talking about see the attached image. But I believe this responsive issue we can deal in a separate ticket.For now let this issue to handle only the overflow issue.

Yes, I think we can put it on RTBC.

Yes @piridium, it is RTBC but we need to compile the SCSS properly.
Use npm install and then npm run build. If someone want fix it they can follow this step. Otherwise I am not available right now but will do it tomorrow.

Fixed the pipeline now the MR is good to go.

Hi @sandip, I understand your point — we're addressing one issue here and creating a separate ticket for the responsive issue. However, the goal isn’t just to get the MR merged, but to find the right solution.

If we look at MR568, it actually resolves both issues, and I genuinely wonder why we can't consider merging it. I've attached a screenshot after applying MR568 for reference:

https://www.drupal.org/files/issues/2025-04-15/MR-568.png

I believe the community should take a moment to review both MRs and make a decision that best addresses the problem comprehensively.

Also this line is not making any required changes in MR548. It is not needed.

.form-managed-file.has-value.is-multiple {
        display: flex;
        gap: 1rem;
        .form-managed-file__meta {
          align-items: center;
        }
      }

Hi @piridium, @mudasirweb
Meanwhile the best solution for this issue has landed on this issue https://www.drupal.org/project/gin/issues/3522015. Also the remove button is properly aligned with the operation button.

table.table-file-multiple-widget tbody td {
  height: auto;
  padding: var(--gin-spacing-density-m) var(--gin-spacing-m);
}

We do not need to apply this above for fixing the overflow issue. Please see this issue and share your perspective.

Here is the image after the fix: https://www.drupal.org/files/issues/2025-05-02/Screenshot%20from%202025-05-02%2011-26-20.png

#3 worked for me.
Drupal Version: 10.4.5
PHP Version: 8.2.28

Patch #3 does not apply anymore on Drupal 11.3.2 / Gin 5.0.12 but the bug is still there.

Anyone else is reproducing ?

Yes I've got still the same issue, attached an updated patch based on #3

Thanks for the quick patch ! #55 works perfectly fine on Drupal 11.3.2 / Gin 5.0.12