Integrated iFrame for donations weird formatting issues

🎈 Using Streamlit
1

Summary

I’m the founder of Mash and we have a number of widgets (e.g., components, iframes) that talk to each other, and embeddable in JS on almost any platform – donations per one-click, per page view, app run, and locking specific types of content with per use monetization. One of our users is trying to deploy the features on streamlit, but the formatting/result is behaving in a bizarre fashion.

We’re trying to figure out how to fix it, and then promote streamlit as a platform that Mash works for.

Steps to reproduce

You can see the issues at https://primodata-bitcoin-dashboard-app-qln4fj.streamlit.app/
It should look more like you can see here: https://artgrinch.xyz/

Code snippet:
We have a standard JS snippet and buttons/webcomponents that can be seen at.
Mash (and floating widgets along with main mash button snippet)
docs.mash.com

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:
It behaves as it does on other sites.

Actual behavior:
All the formatting. size of the iframes and components are not working.

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

No error message.

image
image514×540 27.9 KB

image
image1200×630 123 KB

image
image1280×1109 88.4 KB

image
image1217×1091 60.2 KB

2

I’m the user integrating Mash into Streamlit.

Since it’s a floating widget, I used this solution: How to add a floating widget in streamlit app?.

Part of the problem is when you click the Mash buttons, they popup other items so the iframe the Mash widget is in needs to be big, which causes scrolling issues.

I’ve removed the functionality for now, but here’s the code I used:

components.html('''
<style>
mash-donate-button::part(button-solid){
    margin-left: 260px;
    margin-top: 260px;
}
</style>
  <script>
    window.MashSettings = {
      id: "dd9f18f3-6539-4967-97bc-de1b6bac7b7c"
    };
    var loader = function () {
      window.Mash.init();
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.defer = true;
    script.onload = loader;
    script.src = "https://app.mash.com/sdk/sdk.js";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
  </script>
  <mash-donate-button handle="my-handle" mode="all" button-size="md" button-variant="solid">
  </mash-donate-button>
''', height=400, width=400)

st.markdown(
    """
    <style>
        iframe[width="400"] {
            position: fixed;
            bottom: 0px;
            right: 20px;
        } 
    </style>
    """,
    unsafe_allow_html=True,
)