Skip to content

Fix min version notice overlapping header tabs on form builder #2965

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
shervElmi wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Fix min version notice overlapping header tabs on form builder #2965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b539924
fix(admin): prevent min version notice from overlapping header tabs
shervElmi Feb 23, 2026
949bbfb
Update inline comment for banner height adjustment
shervElmi Feb 23, 2026
02e151b
refactor(admin): use CSS custom property for min version banner heigh…
shervElmi Feb 23, 2026
8ce1c80
Merge branch 'master' into fix/6330-min-version-notice-overlap
shervElmi Mar 11, 2026
a6b8743
npm run build
shervElmi Mar 11, 2026
3a89db5
Comment out min version notice container position adjustments
shervElmi Mar 11, 2026
3ee492b
Uncomment and refine min version notice container position adjustments
shervElmi Mar 11, 2026
7acdd35
Import and initialize banner offset adjustment for min version notice
shervElmi Mar 11, 2026
8343ad4
Adjust min version notice container position with banner offset
shervElmi Mar 11, 2026
215d934
Include admin bar height in min version banner offset calculation
shervElmi Mar 11, 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
4 changes: 2 additions & 2 deletions css/frm_admin.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/formidable_admin.js
View file
Open in desktop

Large diffs are not rendered by default.

65 changes: 35 additions & 30 deletions js/src/admin/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
/* exported frm_add_logic_row, frm_remove_tag, frm_show_div, frmCheckAll, frmCheckAllLevel */

/**
* Internal dependencies
*/
const pageLayout = require( './ui/pageLayout' );

window.FrmFormsConnect = window.FrmFormsConnect || ( function( document, window, $ ) {
const el = {
messageBox: null,
Expand Down Expand Up @@ -11153,46 +11158,46 @@ window.frmAdminBuildJS = function() {

window.frmAdminBuild = frmAdminBuildJS();

jQuery( document ).ready(
() => {
frmAdminBuild.init();
jQuery( document ).ready( () => {
frmAdminBuild.init();

document.querySelectorAll( '.frm-dropdown-menu' ).forEach( convertOldBootstrapDropdownsToBootstrap5 );
document.querySelector( '.preview.dropdown .frm-dropdown-toggle' )?.setAttribute( 'data-bs-toggle', 'dropdown' );
document.querySelectorAll( '.frm-dropdown-menu' ).forEach( convertOldBootstrapDropdownsToBootstrap5 );
document.querySelector( '.preview.dropdown .frm-dropdown-toggle' )?.setAttribute( 'data-bs-toggle', 'dropdown' );

// Bootstrap 5 uses data-bs-toggle instead of data-toggle.
document.querySelectorAll( '[data-toggle]' ).forEach( toggle => toggle.setAttribute( 'data-bs-toggle', toggle.getAttribute( 'data-toggle' ) ) );
// Bootstrap 5 uses data-bs-toggle instead of data-toggle.
document.querySelectorAll( '[data-toggle]' ).forEach( toggle => toggle.setAttribute( 'data-bs-toggle', toggle.getAttribute( 'data-toggle' ) ) );

function convertOldBootstrapDropdownsToBootstrap5( frmDropdownMenu ) {
frmDropdownMenu.classList.add( 'dropdown-menu' );
function convertOldBootstrapDropdownsToBootstrap5( frmDropdownMenu ) {
frmDropdownMenu.classList.add( 'dropdown-menu' );

const toggle = frmDropdownMenu.querySelector( '.frm-dropdown-toggle' );
if ( toggle ) {
if ( ! toggle.hasAttribute( 'role' ) ) {
toggle.setAttribute( 'role', 'button' );
}
if ( ! toggle.hasAttribute( 'tabindex' ) ) {
toggle.setAttribute( 'tabindex', 0 );
}
const toggle = frmDropdownMenu.querySelector( '.frm-dropdown-toggle' );
if ( toggle ) {
if ( ! toggle.hasAttribute( 'role' ) ) {
toggle.setAttribute( 'role', 'button' );
}

// Convert <li> and <ul> tags.
if ( 'UL' === frmDropdownMenu.tagName ) {
convertBootstrapUl( frmDropdownMenu );
if ( ! toggle.hasAttribute( 'tabindex' ) ) {
toggle.setAttribute( 'tabindex', 0 );
}
}

function convertBootstrapUl( ul ) {
let html = ul.outerHTML;
html = html.replace( '<ul ', '<div ' );
html = html.replace( '</ul>', '</div>' );
html = html.replaceAll( '<li>', '<div class="dropdown-item">' );
html = html.replaceAll( '<li class="', '<div class="dropdown-item ' );
html = html.replaceAll( '</li>', '</div>' );
ul.outerHTML = html;
// Convert <li> and <ul> tags.
if ( 'UL' === frmDropdownMenu.tagName ) {
convertBootstrapUl( frmDropdownMenu );
}
}
);

function convertBootstrapUl( ul ) {
let html = ul.outerHTML;
html = html.replace( '<ul ', '<div ' );
html = html.replace( '</ul>', '</div>' );
html = html.replaceAll( '<li>', '<div class="dropdown-item">' );
html = html.replaceAll( '<li class="', '<div class="dropdown-item ' );
html = html.replaceAll( '</li>', '</div>' );
ul.outerHTML = html;
}

pageLayout.initBannerAdjustment();
} );

window.frm_show_div = ( div, value, showIf, classId ) => {
if ( value == showIf ) {
Expand Down
33 changes: 33 additions & 0 deletions js/src/admin/ui/pageLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Initializes banner offset adjustment to prevent overlap with fixed page containers.
*
* @since x.x
*
* @return {void}
*/
export function initBannerAdjustment() {
const banner = document.querySelector( '#wpbody-content > .frm_previous_install' );
if ( ! banner ) {
return;
}

const containers = document.querySelectorAll( '.frm_page_container' );
if ( ! containers.length ) {
return;
}

/**
* Applies banner offset to page containers.
*/
const applyBannerOffset = () => {
containers.forEach( container => {
container.style.setProperty(
'--min-version-banner-height',
`${ Math.ceil( banner.offsetHeight + ( document.getElementById( 'wpadminbar' )?.offsetHeight || 0 ) ) }px`
);
} );
};

applyBannerOffset();
window.addEventListener( 'resize', () => applyBannerOffset() );
}
10 changes: 10 additions & 0 deletions resources/scss/admin/layout/container/_container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@
left: 0;
}

/* Adjust container position when min version notice is displayed */
body:has(#wpbody-content > .frm_previous_install) {

.frm_wrap .frm_page_container,
&.frm-admin-page-styles .frm_page_container {
top: var(--min-version-banner-height, 40px);
height: calc(100vh - var(--min-version-banner-height, 40px));
}
}

.frm-full-screen.frm-admin-page-entries .frm_page_container,
.frm-new-entry .frm_page_container,
.frm-admin-page-reports .frm_page_container,
Expand Down
4 changes: 4 additions & 0 deletions resources/scss/admin/media-queries/_screen-laptop.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,4 +150,8 @@
#frm_bs_dropdown .frm_bstooltip {
display: block !important;
}

html.wp-toolbar:has( body.frm-full-screen #wpbody-content > .frm_previous_install ) {
padding-top: 0;
}
}
Loading