FIx fieldsets overlapping when using Gin admin theme

Created on 19 April 2022, over 2 years ago
Updated 12 June 2023, over 1 year ago

When using Gin admin theme, button are positionned using postion: absolute & transform: transate, causing them to overlap the legend of the fieldset underneath it, as shown in the following screenshot :

The attached css patch fixes it :

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡«πŸ‡·France jmaxant

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.

  • πŸ‡ΊπŸ‡ΈUnited States K L Dickenson Ann Arbor, Michigan

    May I suggest a CSS update that solves the problem? Since the fieldsets are being displayed as `display: flex`, just add a gap.

    paragrapghs_broswer/css/paragraphs_broswer.css
    line 27:
    .paragraphs-browser-wrapper .form-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 0;
    }
    line 33

  • πŸ‡ΊπŸ‡ΈUnited States K L Dickenson Ann Arbor, Michigan

    My first diff patch with the CSS change of adding a gap to the `.paragraphs-broswer-wrapper .form-wrapper`.

  • Issue was unassigned.
  • Status changed to Needs review about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States DamienMcKenna NH, USA

    FYI you should set the "assigned" field to "unassigned" after you're finished work on the issue, that way others know you're done; attribution is handled via separate fields. Also, please try to remember to set the status to "needs review" when a patch is uploaded or a merge request is created, so others know there's something to review. Thanks!

  • Status changed to Needs work about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States DamienMcKenna NH, USA

    The problem is that the fieldset contents are not positioned correctly within their parent container:
    * Patch #5 just pushes the next row down but doesn't fix the positioning.
    * Patch #8 moves the next row down but again doesn't fix the positioning.

  • Status changed to Needs review about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States DamienMcKenna NH, USA

    This makes a few minor changes, but doesn't fix it completely.
    * Some spacing is added between the rows, ala #8, but it's reduced to 30px instead of 48.
    * The buttons are displayed inside the box.
    * The spacing is tightened up a little bit.

    The fieldset legend still displays over the top border, which IMHO doesn't look as good.

  • πŸ‡ͺπŸ‡¨Ecuador alexis_mc

    I found another solution for this issue, please review it.

  • πŸ‡ͺπŸ‡¨Ecuador alexis_mc

    Please check it, I added new changes

  • Status changed to RTBC 7 months ago
  • πŸ‡°πŸ‡¬Kyrgyzstan elaman

    #13 is working.

  • Status changed to Needs work 3 months ago
  • πŸ‡§πŸ‡ͺBelgium tim-diels Belgium πŸ‡§πŸ‡ͺ

    #13 works and displays the buttons inside the fieldset. It feels not completed yet. Can we discuss another solution for this maybe?

Production build 0.71.5 2024