Repository navigation
Fix inline Submit button sitting below the inputs with frm_flex submit HTML - #3613
vivi-the-going-merry[bot] wants to merge 1 commit into
Conversation
The ::before spacer was a flex item in the wrapping row and the button was centered against it. Make the spacer a full row and pin items to the top. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
Important Review skippedBot user detected. To trigger a single review, invoke the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| PHP |  |
Oct 23, 2026 2:13a.m. | Review ↗ |
| JavaScript | |
Oct 23, 2026 2:13a.m. | Review ↗ |
Important
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
franky-the-going-merry
Bot
added
the
franky-working
![franky-the-going-merry[bot]](https://avatars.githubusercontent.com/in/4233782?s=60&v=4){kind=small}
There was a problem hiding this comment.
Approving. The fix works and I reproduced it live. One small non-blocking note on row-gap: 0, inline below.
Repro (Lite master vs. this PR, Pro active, two frm4 fields, top labels, inline submit, default frm_submit frm_flex HTML): button top minus input top was 17.05px on master and is 0px on this branch. At 1400px and 700px wide. The old frm_submit markup stays at ~0px both before and after. Computed styles on the branch: spacer flex-basis: 100%, order: -2; wrapper align-items: flex-start, row-gap: 0.
After, single page:
After, multi-page form page 2 (Previous top 0px, Submit 34px; they stack because the cell is narrow, same as before the PR):
Not exercised: the second selector (frm_inline_submit in the submit HTML without frm_inline_top), and non-default Style settings. Checked by reading it, not rendering it. Psalm is red, but master's last two runs are red too (stripe/ files, nothing in this diff).
| .with_frm_style .frm_submit.frm_flex.frm_inline_submit { | ||
| align-items: flex-start; | ||
| align-content: flex-start; | ||
| row-gap: 0; |
There was a problem hiding this comment.
Non-blocking. row-gap: 0 also removes the ~1.9px gap that used to separate Previous and Submit when they wrap onto two rows. On page 2 of a multi-page form I measured the stacked buttons as 0px apart after this PR (the screenshot above shows them touching). The 0 is needed to keep the spacer from pushing the buttons down, so if you want the separation back, put it on the buttons instead, for example a small margin-bottom on .frm_prev_page inside this selector scope. Fine to leave if you'd rather not touch it.
There was a problem hiding this comment.
Leaving it. A margin-bottom on the Previous button would also grow the row in the common side-by-side layout, and the 2px only showed up when the buttons wrap, which is the narrow-cell case that stacked before too.
franky-the-going-merry
Bot
added
vivi-pickup
and removed
franky-review
franky-working
vivi-the-going-merry
Bot
added
vivi-working
franky-the-going-merry
Bot
added
the
franky-working
|
Agreed, leaving |
franky-the-going-merry
Bot
removed
franky-review
franky-working
Fixes Strategy11/formidable-pro#6894
What was broken
With Submit Button Position set to Inline and top labels, the Submit button sat 17px below the inputs when the form used the default submit HTML (
<div class="frm_submit frm_flex">). Forms with the old<div class="frm_submit">lined up fine.The hidden
::beforespacer is a flex item in the wrappingfrm_flexrow, so it no longer sits above the button.align-items: centerthen centers the button against the spacer.What changed
css/custom_theme.css.php: for an inline submit that usesfrm_flex, the spacer takes a full row and the items start at the top with no row gap.order: -2keeps the spacer first when Pro puts Previous (order: -1) in the same row.How it was verified
Lite + Pro in a local preview env, forms with two
frm4fields and the inline submit. Button top minus input top:frm_submit)Before:
After:
Multi-page form, page 2 (Previous + Submit), top offset from the input top. Before: Previous -26px, Submit 37.8px. After: Previous 0px, Submit 34px. They stack because the cell is narrow; that is the same before and after.
No automated test:
frm_flexonly becomes a flex row with Pro active, and Lite's CI has no Pro.🤖 Generated with Claude Code