Skip to content

Fix tab active underline positioning on initial load and resize #2798

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

Merged
Crabcyborg merged 15 commits into from
Mar 5, 2026
Merged

Fix tab active underline positioning on initial load and resize #2798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
45412ce
Remove data-initial-width attributes from tab underlines and fix trai…
shervElmi Jan 14, 2026
c533ad4
Remove unused initDefaultSlideTrackerWidth method and simplify initSl…
shervElmi Jan 14, 2026
de14bd0
Initialize slide track underline for active tab on load and show unde…
shervElmi Jan 14, 2026
3ad9fdf
Expand ResizeObserver target to include styling_settings container as…
shervElmi Jan 14, 2026
417bb38
Hide tab underline by default and add trailing newline to SCSS file
shervElmi Jan 14, 2026
20b52e3
Move frmTabsNavigator initialization to afterViewInit and remove manu…
shervElmi Jan 14, 2026
7fac5ea
Remove frm-first class from tab underlines and related JavaScript logic
shervElmi Jan 14, 2026
ec7d3bc
Remove fixed width and position modifiers from tab underlines
shervElmi Jan 14, 2026
26617aa
Add auto generated files
shervElmi Jan 14, 2026
279408d
Merge branch 'master' into fix/tab-underline-resize-positioning
shervElmi Jan 23, 2026
ed4ea9a
Add formidable-settings-componets.js file
shervElmi Jan 23, 2026
91cc095
Merge remote-tracking branch 'origin/HEAD' into fix/tab-underline-res…
shervElmi Mar 5, 2026
65b511f
npm run build
shervElmi Mar 5, 2026
1484ff9
(fix): DeepSource errors
shervElmi Mar 5, 2026
01cea87
Remove map file
Crabcyborg Mar 5, 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
2 changes: 1 addition & 1 deletion classes/views/frm-forms/add_field_links.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="frm_field_list">
<div class="frm-style-tabs-wrapper">
<div class="frm-tabs-delimiter">
<span data-initial-width="190" class="frm-tabs-active-underline frm-first"></span>
<span class="frm-tabs-active-underline"></span>
</div>

<div class="frm-tabs-navs">
Expand Down
40 changes: 20 additions & 20 deletions classes/views/styles/_buttons.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
?>
<div class="frm-style-tabs-wrapper">
<div class="frm-tabs-delimiter">
<span data-initial-width="123" class="frm-tabs-active-underline frm-first"></span>
<span class="frm-tabs-active-underline"></span>
</div>
<div class="frm-tabs-navs">
<ul class="frm-flex-box">
Expand Down Expand Up @@ -34,7 +34,7 @@
);
?>
<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_text_color"
class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand All @@ -52,7 +52,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_font_size"
class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
</div>
Expand All @@ -70,7 +70,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_weight"
class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
</div>
Expand All @@ -88,7 +88,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_width"
class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
</div>
Expand All @@ -107,7 +107,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_height"
class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
</div>
Expand All @@ -125,7 +125,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_border_color"
class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
</div>
Expand All @@ -143,7 +143,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_border_width"
class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
</div>
Expand All @@ -161,7 +161,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' );
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_shadow_color"
class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></label>
</div>
Expand All @@ -179,7 +179,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_border_radius"
class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
</div>
Expand All @@ -197,7 +197,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' )
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_margin"
class="frm-style-item-heading">
<?php esc_html_e( 'Margin', 'formidable' ); ?>
Expand All @@ -219,7 +219,7 @@ class="frm-style-item-heading">
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_padding"
class="frm-style-item-heading">
<?php esc_html_e( 'Padding', 'formidable' ); ?>
Expand All @@ -240,7 +240,7 @@ class="frm-style-item-heading">
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_style"
class="frm-style-item-heading">
<?php esc_html_e( 'Disable submit button styling', 'formidable' ); ?>
Expand All @@ -267,7 +267,7 @@ class="frm-style-item-heading">
<div class="frm-active">
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_hover_bg_color"
class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
</div>
Expand All @@ -285,7 +285,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?><
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_hover_color"
class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand All @@ -303,7 +303,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_hover_border_color"
class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
</div>
Expand All @@ -325,7 +325,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
<div class="frm-active">
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_active_bg_color"
class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
</div>
Expand All @@ -343,7 +343,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?><
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_active_color"
class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand All @@ -361,7 +361,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_submit_active_border_color"
class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
</div>
Expand All @@ -381,4 +381,4 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
</div>
</div>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions classes/views/styles/_field-colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
?>
<div class="frm-style-tabs-wrapper">
<div class="frm-tabs-delimiter">
<span data-initial-width="88" class="frm-tabs-active-underline frm-first"></span>
<span class="frm-tabs-active-underline"></span>
</div>
<div class="frm-tabs-navs">
<ul class="frm-flex-box">
Expand Down Expand Up @@ -352,4 +352,4 @@ class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></la
</div>
</div>
</div>
</div>
</div>
20 changes: 10 additions & 10 deletions classes/views/styles/_field-labels.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
?>
<div class="frm-style-tabs-wrapper">
<div class="frm-tabs-delimiter">
<span data-initial-width="169" class="frm-tabs-active-underline frm-first"></span>
<span class="frm-tabs-active-underline"></span>
</div>
<div class="frm-tabs-navs">
<ul class="frm-flex-box">
Expand All @@ -18,7 +18,7 @@
<div class="frm-active">
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_label_color"
class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
</div>
Expand All @@ -36,7 +36,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_font_size"
class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
</div>
Expand All @@ -54,7 +54,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_required_weight"
class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
</div>
Expand All @@ -72,7 +72,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_position"
class="frm-style-item-heading"><?php esc_html_e( 'Position', 'formidable' ); ?></label>
</div>
Expand All @@ -90,7 +90,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Position', 'formidable' ); ?><
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_label_align"
class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
</div>
Expand All @@ -108,7 +108,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_width"
class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
</div>
Expand All @@ -126,7 +126,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_label_padding"
class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
</div>
Expand All @@ -149,7 +149,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
<div>
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_required_color"
class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label>
</div>
Expand All @@ -167,7 +167,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_required_weight"
class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
</div>
Expand Down
20 changes: 10 additions & 10 deletions classes/views/styles/_form-messages.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
?>
<div class="frm-style-tabs-wrapper">
<div class="frm-tabs-delimiter">
<span data-initial-width="174" class="frm-tabs-active-underline frm-first"></span>
<span class="frm-tabs-active-underline"></span>
</div>
<div class="frm-tabs-navs">
<ul class="frm-flex-box">
Expand All @@ -18,7 +18,7 @@
<div class="frm-active">
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_success_bg_color"
class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
</div>
Expand All @@ -36,7 +36,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?><
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_success_border_color"
class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
</div>
Expand All @@ -54,7 +54,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_success_text_color"
class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand All @@ -72,7 +72,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_success_font_size"
class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
</div>
Expand All @@ -94,7 +94,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
<div>
<div class="frm_grid_container">
<div class="frm5 frm_form_field">
<label
<label
for="frm_error_bg"
class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?></label>
</div>
Expand All @@ -112,7 +112,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'BG Color', 'formidable' ); ?><
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_error_border"
class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' ); ?></label>
</div>
Expand All @@ -130,7 +130,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_error_text"
class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand All @@ -148,7 +148,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
</div>

<div class="frm5 frm_form_field">
<label
<label
for="frm_error_font_size"
class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
</div>
Expand All @@ -168,4 +168,4 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
</div>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion css/admin/frm-settings-components.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/frm_admin.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/formidable-settings-components.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion js/formidable-settings-components.js.map
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion js/formidable-web-components.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading