Unable to display button using components

Using Streamlit
#1

I m having problem with display of button when i use streamlit components. I have the javascript option enabled on my browser.

I’m using python 3.7, streamlit 0.71, node v10.15.1, npm 6.4.1.

I observe that the html is embedded in the iframe but cannot see the button being displayed.

image
image1337×431 31.4 KB

Here is the reference that i’m trying to follow.

image
image663×553 51.7 KB

I’m basically trying to embed google sign in button to my web app to authenticate users. It has platform.js library embedded in the html page.

Please let me know if there are any issues that i need to resolve.

#2

Hey @Konchada_Srinivas and welcome to the forum! :wave:

Try checking the height of the iframe. If it’s 0, calling Streamlit.setFrameHeight should solve the issue. If that’s not the reason, please post some code - and I’ll try to be more helpful. :slight_smile:

And thanks for using Streamlit!

#3

Hey @kantuni thanks for the prompt response.

As i have mentioned earlier am trying to integrate google sign in option into my Streamlit web app. I have the google sign in code in a html file which i m trying to render using the components.

image
image1346×453 19 KB

for some reason i can not see the sign in button but if i just open the file. I can see and work on it.

image

My task is to authenticate users using the google Oauth so it should prompt for sign in and then the users will be able to access the actual application.

Here is my code.

import codecs

import streamlit as st

import streamlit.components.v1 as components

from PIL import Image

my_file = codecs.open("index.html", "r", "utf-8")

login = my_file.read()

components.html(login)

def main():

    menu = ["Home", "Invoice Lookup", "Admin"]

    choice = st.sidebar.selectbox("Please select the below menu option",menu)

    if choice == "Home":

        st.subheader("Home")

    

    elif choice == "Invoice Lookup":

        st.subheader("Invoice Lookup")

    

    else:

        st.subheader("Admin")

if __name__ == '__main__':

    main()

Kindly suggest me the best solution to achieve this.