CSS is broken for columns on form actions

Closed Beginner friendly
  • Is something wrong?
#7,861 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #7869 by @javiereguiluz — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
62/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css
Domain
frontend

Research direction

The layout comes from the .flex-fill rule, which is applied to form columns created with FormField::addColumn(6). Find where that rule is defined in the bundle's CSS assets, then reproduce with two columns of uneven height to confirm the stretching. Test the proposed flex-grow change, and check that other .flex-fill uses still render correctly. Done means the columns no longer shift their contents down, with no regressions in other form layouts.

Written by the indexing model from the issue text.

Description

Create two columns: FormField::addColumn(6). If one column is hight, another column streches to it's size, and elements of the column shifts down.
To improve this, I change flex-grow property of flex-fill CSS class to 0.
Original:

.flex-fill {
    flex: 1 1 auto !important;
}

Changed:

.flex-fill {
    flex: 0 1 auto !important;
}
Dominant language
PHP
Stars
4.3k
Forks
1.1k
Avg merge
1d 23h
Merged PRs (30d)
28

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from EasyCorp/EasyAdminBundle

All issues in EasyCorp/EasyAdminBundle

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.