HTML element only appears when window is resized

Need help Responsiveness
1

Has anyone had experience with an html element appearing only when resizing your window? My HTML element has two lines of code:

<script>
https://cdn.customerwebsite.io/customerCssHtmlJs.min.js
</script>

And then to initiate their widget on the screen, a simple:

<script>
customer.init({appToken: '23423992929'});
</script>

It works fine on a non-bubble html page. When inserting in Bubble, the widget displays when the window is resized in any direction. I’m guessing their might be some conflicting css elements between Bubble and the customers style. Any thoughts?

2

Maybe the init function is being called too early?

Could try putting the cdn script into the page html header, to load earlier.

Another thing to try is wrap the init function in a condition to check for Bubble page is loaded:

<script> if ("Page entire is loaded" == "yes") { customer.init({appToken: '23423992929'}); } </script>

Replace the Page entire is loaded with a dynamic expression, leaving the double quotes around it.

FYI should specify that the type of script is javascript, to future-proof for when another scripting language becomes default :stuck_out_tongue:

3

You nailed it @mishav. This solved everything, thanks!

Just to detail the progress of your solution:

  1. By putting a conditional if() statement into the html code to listen for a page load, the element appeared right away on every load (there was no longer a need to resize the window for the widget to appear in the window)
  2. By putting the cdn script in the header, there was no longer any CSS issues (the strange background colors and becoming offset slightly)

I notice that the UI is much better when their widget is forced into ‘mobile mode’, labeled as “@phone-tablet:” in their stylesheet. Is there anyway to force “@phone-tablet:” for all window sizes via inline CSS on Bubble’s side?

4

Great that it works!

Depends on how the widget references the styles, if @phone-tablet is a class name, you might have some luck with using JQuery to set a class on the container element.

Edit: Another possibility is to get their un-minified scripts/css and alter things, then load the altered script.

5

JSbeatifier works great :slight_smile:

http://jsbeautifier.org/