Skip to content

Fieldset contents width overflows fieldset width after migration to CSS grid #221

@xak2000

Description

@xak2000

I noticed that in 06964fe the Fieldset component was migrated to use display: grid in one of the containers.

After this change some of my Fieldsets started to show inner content that is wider than the fieldset itself. I.e. the content overflows the Fieldset container despite the fact that it is enough space to just wrap long lines of text. This is happenning when the parent of Fieldset component has pretty narrow width (e.g. 256px).

Previously (when all containers of Fieldset were display: block) it worked fine, the content was fit inside the fieldset (long lines were just wrapped, as expected). But with grid this doesn't work anymore.

I found a similar problem with grid: https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

The proposed solution is to use min-width: 0 to the grid cell. It says that it is needed only for Firefox, but I actually have this behavior in Chrome.

Anyway, this solution works for me (at least in Chrome):

.p-fieldset-content-wrapper {
  min-width: 0;
}

I'm not sure if it is 100% bullet-proof solution and if there are any other side-effects. I use fieldsets a lot and didn't find any problems so far after adding min-width: 0 to the p-fieldset-content-wrapper class.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions