Buttons do not render in html

[ValentinKoch]

Describe the bug

Buttons dont render in HTML. Are clickable but do not look as intended, also when providing a dedicated css.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

with gr.Blocks() as demo:
    subject = gr.HTML(value='<button>Click Me!</button>')
demo.launch()

Screenshot

Logs

no logs

System Info

gradio 3.4, Chrome

Severity

annoying

[abidlabs]

Indeed that is the case, thank you for creating the issue @ValentinKoch!

[freddyaboulton]

I can't reproduce so I will close this out! Feel free to re-open if I'm misunderstanding @ValentinKoch !

import gradio as gr

with gr.Blocks() as demo:
    subject = gr.HTML(value="""<button type="button" onclick="alert('Hello world!')">Click Me!</button>""")
demo.launch()

[ValentinKoch]

Hi @freddyaboulton , the Button is clickable but the design is not rendering. A Button looks usually like this: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test
so I'd kindly ask you to reopen the issue. It makes for a weird design if buttons are just text that you can click on.
Best
Valentin

[freddyaboulton]

Reopened! Thanks @ValentinKoch

[davidbernat]

@freddyaboulton: this may be out of scope, but may I ask these two questions as this ticket is nearest in scope?

1. Is it possible to shut off all default style within a gr.HTML() so that it is, effectively, an iframe.
2. Your demo here use onclick() to launch alert but could you demonstrate a correct design pattern for calling a linked snippet of JavaScript which may or may not be embedded in the element, and how you would embed it in the element?

[pngwn]

This is happening because we 'reset' styles for easier styling later. I don't of a great solution to this unless we move all of our resets inline. We can fix the button but there will be other similar issues with different elements.

I'm not convinced this is a bug, if users are going to write custom HTML and embed it into a page, I don't think it is unreasonable for them to write some custom CSS either. We make no guarantees about custom HTML + CSS.

[ValentinKoch]

For me this issue does not longer persist as the workaround i was using for is no longer needed as you fixed the large file freeze issue :) Still curious what you mean by custom CSS, how would I get this Button to render? I could not make it even with inline style commands.. but im also not an expert

[abidlabs]

Hi @ValentinKoch very late response, but the reason the CSS isn't working is because you might be targeting via class names. If you are going to use class named, you'd have to put !important -- which is of course not recommended anyways -- but if you do choose to go down this route, something like this works for me:

html = """
<style>
.btn {
  border: 1px solid gray;
  background-color: #eee !important;
  border-radius: 10px !important;
  padding: 10px !important;
  cursor: pointer;
  display: inline-block;
}

/* On mouse-over */
.btn:hover {background: #ddd !important;}
</style>
<button class="btn">Click me</button>
"""

with gr.Blocks() as demo:
    gr.HTML(html)
demo.launch()

[lucky-sixt]

Hello, It doesn't work for me too. I have tried for radio buttons, and it shows all white color, while selecting one of the option.

import gradio as gr

def html_form(text):
    form = f"""
    
    <form>
        <p>Please select your favorite Web language:</p>
        <input type="radio" id="html" name="fav_language" value="HTML">
        <label for="html">HTML</label><br>
        <input type="radio" id="css" name="fav_language" value="CSS">
        <label for="css">CSS</label><br>
        <input type="radio" id="javascript" name="fav_language" value="JavaScript">
        <label for="javascript">JavaScript</label>
    </form>
    """
    return form

results = []

def update_results(text):
    if response:
        results.append([text])

iface = gr.Interface(fn=html_form, inputs=["text"], outputs="html", capture_session=True)

iface.func = update_results

iface.launch()
<img width="1146" alt="Screenshot 2023-10-26 at 7 37 46 PM" src="https://github.com/gradio-app/gradio/assets/105032900/92a9fbea-33ae-49d3-9eb3-e0e080aebb9b">

Got this