Display IPython.display.HTML class objects inside ipywidgets

Question

I want to display IPython.display.HTML object i.e. html_bt and widget i.e. bt inside HBox Layout. How do I achieve that? Is it even possible? Or how do I convert html_bt to widget objects? Following is my code:

from ipywidgets import widgets, Layout, HBox
from IPython.display import display, HTML

css_str = '<style>.foo{color:#F00;} )} </style>'


out = widgets.Output()

def OnClick():
    with out:
        print('QQQ')

html_bt=HTML(css_str + '<button class="button-style" onclick="IPython.notebook.kernel.execute(\'OnClick()\')"> <img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Snow"></button>')

bt = widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)


h_box = HBox([bt, display(html_bt)])
h_box

ac24 · Accepted Answer · 2020-05-04 07:49:43Z

1

ipywidgets has its own HTML widget, if you use that does it give what you want?

from ipywidgets import widgets, Layout, HBox, HTML
# from IPython.display import display, HTML

css_str = '<style>.foo{color:#F00;} )} </style>'


out = widgets.Output()

def OnClick():
    with out:
        print('QQQ')

html_bt=HTML(css_str + '<button class="button-style" onclick="IPython.notebook.kernel.execute(\'OnClick()\')"> <img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Snow"></button>')

bt = widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)

h_box = HBox([bt, html_bt])
h_box

answered May 4, 2020 at 7:49

ac24

5,6051 gold badge21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vaishnavi Dongre Over a year ago

No, it does not. I tried out the above code. I can see the button but OnClick function is not getting called in this case.

Conor McM · Accepted Answer · 2022-03-29 08:29:47Z

One slightly long-winded fix for this is to display your IPython.display.HTML in a ipywidgets.widgets.Output panel and provide that to the HBox.

from ipywidgets import widgets, Layout, HBox
from IPython.display import display, HTML

css_str = '<style>.foo{color:#F00;} )} </style>'


out = widgets.Output()

def OnClick():
    with out:
        print('QQQ')

html_bt=HTML(css_str + '<button class="button-style" onclick="IPython.notebook.kernel.execute(\'OnClick()\')"> <img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Snow"></button>')

bt = widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)
html_out = widgets.Output()
with html_out:
    display(html_bt)

h_box = HBox([bt, html_out])
h_box

Collectives™ on Stack Overflow

Display IPython.display.HTML class objects inside ipywidgets

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related