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.