Skip to content
πŸš€ Rapid Application Development with the App Builder

Known Limitations ​

Full-Screen Mode Gets Overlapped ​

The full-screen feature allows users to view an app in full-screen mode, enhancing the viewing experience on both desktop computers and mobile devices. This feature is enabled by default but can be disabled from the App Manager’s app info menu.

In some cases, full-screen mode does not work out-of-the-box. For example, menu bars usually have a higher stack order than content containers. You can resolve this issue by manually increasing the stack order of the content container. WP Data Access adds a custom class to the body when an app is in full-screen mode. You can use this body class to temporarily increase the stack order of the content container holding your app. Alternatively, you can disable full-screen mode for your app.

Fixing compatibility issues with Divi ​

πŸ“Œ We recommend creating a distinct section with a single text module that contains the app shortcode in order to avoid modules overlapping. Before you begin adding custom CSS, try this first.

A CSS patch for Divi has already been added. If the built-in solution doesn't work for you, use the following CSS code to resolve Divi compatibility concerns.

css
body.pp-fullscreen .et_builder_inner_content,
body.pp-fullscreen .et_builder_inner_content .wpda_app_fullscreen {
  z-index: 999999 !important;
}
body.pp-fullscreen footer {
	display: none;
}

Where to enter the CSS code ​

  • Enable Divi Visual Builder.
  • Open the section settings of the container holding your app.
  • Navigate to the Advanced menu.
  • Open the CSS ID & Classes section.
  • Enter wpda_app_fullscreen in CSS Class.
  • Open the Custom CSS section.
  • Enter the provided CSS code.

Fixing compatibility issues with Elementor ​

A CSS patch for Elementor has already been added. If the built-in solution doesn't work for you, use the following custom CSS code to resolve compatibility issues with Elementor.

css
body.pp-fullscreen div#et-main-area {
	z-index: 999999;
	position: absolute;
}

> Adding custom CSS code is explained here…

Issues with other themes or plugins? ​

If you encounter issues with other themes or plugins, please let us know so we can provide a solution.

401 Unauthorized Error 0n Update ​

The server returns a 401 Unauthorized error when updating an app from either the Table Builder or Form Builder, even though the user has admin credentials. This issue occurs on hosting platforms that use StackProtect. StackProtect is incorrectly identifying the WordPress REST API call as potentially malicious, even though it is a loopback call. As a result, StackProtect triggers a reCAPTCHA challenge that the plugin cannot respond to (this issue also affects other plugins). The problem can be confirmed by inspecting the response to the request in the browser’s developer tools, where the challenge will be visible.

Workaround ​

The issue is intermittent, so retrying the modification may occasionally succeed. The problem also appears to be much more common when the permalink structure is not set to Post name. If it is possible to safely change the permalink structure, doing so is likely to reduce the frequency of the issue.

Permanent Resolution ​

It does not appear to be possible to configure StackProtect to include an exception for this case. Therefore, the recommended resolution is to disable StackProtect and replace it with a more flexible solution, such as Wordfence.

RegExp Usage in Hooks ​

When using RegExp in hooks, make sure to use the RegExp constructor instead of the RegExp literal syntax. The literal syntax is not exported correctly and leads to errors when imported on another server.

❌ Avoid: RegExp Literal Syntax ​

The following code will not be exported correctly:

js
const mysqlDateTime = formattedDate
    .replace(
        /(\d{2})\/(\d{2})\/(\d{4}), (\d{2}):(\d{2}):(\d{2})/,
        "$3-$2-$1 $4:$5:$6"
    );

πŸ“Œ The backslashes are interpreted as escape characters, leading to SyntaxError: Bad escaped character in JSON.

The following code contains the same functionality and will be exported and imported correctly:

js
const mysqlDateTime = formattedDate
    .replace(
        new RegExp("(\\d{2})/(\\d{2})/(\\d{4}), (\\d{2}):(\\d{2}):(\\d{2})"),
        "$3-$2-$1 $4:$5:$6"
    );