Skip to content

Fix inline Submit button sitting below the inputs with frm_flex submit HTML #3613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vivi-the-going-merry wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix inline Submit button sitting below the inputs with frm_flex submit HTML #3613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df6754b
Align inline Submit button with inputs when submit HTML uses frm_flex
vivi-the-going-merry[bot] Oct 23, 2026
e404c85
test(styles): cover inline flex submit alignment in generated CSS (#6…
Crabcyborg Oct 30, 2026
9af2a45
Merge remote-tracking branch 'origin/master' into pr-forms-3613
Crabcyborg Oct 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions css/custom_theme.css.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,6 +734,19 @@
gap: 2%;
}

.with_frm_style.frm_inline_top .frm_submit.frm_flex,
.with_frm_style .frm_submit.frm_flex.frm_inline_submit {
align-items: flex-start;
align-content: flex-start;
row-gap: 0;

@franky-the-going-merry franky-the-going-merry Bot Oct 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@vivi-the-going-merry vivi-the-going-merry Bot Oct 23, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}

.with_frm_style.frm_inline_top .frm_submit.frm_flex::before,
.with_frm_style .frm_submit.frm_flex.frm_inline_submit::before {
flex-basis: 100%;
order: -2;
}

<?php if ( $pro_is_installed ) { ?>
.with_frm_style .frm_submit.frm_flex button.frm_button_submit ~ .frm_prev_page {
order: -1;
Expand Down
18 changes: 18 additions & 0 deletions tests/phpunit/styles/test_FrmStyle.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,24 @@ public function test_get_all() {
$this->assertSame( FrmStylesController::$post_type, reset( $styles )->post_type );
}

/**
* With the default "frm_submit frm_flex" submit HTML, the inline submit label spacer must take a full row
* and the button must not be vertically centered against it.
*
* @see https://github.com/Strategy11/formidable-pro/issues/6894
*/
public function test_generated_css_aligns_inline_flex_submit_with_inputs() {
$css = $this->run_private_method(
array( new FrmStyle(), 'get_css_content' ),
array( FrmAppHelper::plugin_path() . '/css/custom_theme.css.php' )
);
$submit_selector = '.with_frm_style.frm_inline_top .frm_submit.frm_flex,.with_frm_style .frm_submit.frm_flex.frm_inline_submit';
$spacer_selector = '.with_frm_style.frm_inline_top .frm_submit.frm_flex::before,.with_frm_style .frm_submit.frm_flex.frm_inline_submit::before';

$this->assertStringContainsString( $submit_selector . ' {align-items: flex-start;', $css );

@deepsource-io deepsource-io Bot Oct 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Call to an undefined method test_FrmStyle::assertStringContainsString()


The method you are trying to call is not defined, which can result in a fatal error.

$this->assertStringContainsString( $spacer_selector . ' {flex-basis: 100%;order: -2;}', $css );

@deepsource-io deepsource-io Bot Oct 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Call to an undefined method test_FrmStyle::assertStringContainsString()


The method you are trying to call is not defined, which can result in a fatal error.

}

/**
* The CSS version must be a zero-padded timestamp so distinct save times
* never collide (e.g. 1 Jan 10:59 and 11 Jan 00:59 both produced "111059").
Expand Down
Loading