Skip to content
POWR Help Center home
InboxAsk a human

Conflicting CSS on website makes app look weird / get cutoff / not display

Problem:

User reports that their app looks weird, cutoff, or not display on their website. When you look at the app view and embed on a regular html site it works ok. 

Steps to Reproduce:

- Visit the users site and confirm that the app does indeed look incorrect - Look at JS console and see if there are any red errors coming from POWr. If so, it is likely a bug and should be escalated. - Visit the app view (eg /plugins/form-builder/view/[APP_ID]) and verify that it display correctly - Try embedding the exact app on an html page and verify that it displays correctly (eg https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic) - Inspect the iframe of the app in the live webpage. Make sure the content in the iframe is actually present and has height. 

Solution:

User has conflicting CSS. They either need custom CSS on their page, or they may be able to change location of the app inside the html code. Some things to look for when inspecting the user's website in browser console:

- Inspect at the parent elements (and their ancestors) above the embedded app. For each, look if there is a "display: none" or a "height: 0" or "max-height": 0 or similar CSS. Try disabling any CSS properties that you think are suspicious and see if the app suddenly appears on the page.

- If the app is a fixed-position app (e.g. popup, notification-bar, chat), then see if the embed code for the app is nested deeply within many html elements. If so, suggest to user they add it as close as possible to the beginning or end of the tag.

- If you can't figure out the cause, escalate the ticket. We don't want to spend a long time trying to debug edge case CSS issues, so if we can't resolve it we should write back a generic response that it seems there is conflicting css on the page and we recommend trying to change the position of the embed code on the page to see if that resolves the issue.

Recommended Response:

So sorry to hear your POWr App is not displaying correctly on your website. I checked your site and was able to reproduce the issue.

[TODO: Update this with recommended responses for the various cases]