CODEWITHSUNDEEP
pythonipywidgets
qoqosz
qoqosz

Reputation: 227

Setting background color of a box in ipywidgets

While creating a layout with ipywidgets I would like to have a HBox with a border and filled with a selected colour. The former is easy to set while the latter is a bit troublesome. I couldn't find a control option for the background fill in the doc. Is there any workaround?

from ipywidgets.widgets import Label, Layout, HBox

label1 = Label('Text1')
label2 = Label('Text2')
box1 = HBox([label1, label2], layout=Layout(border='solid 2px')) # background_color='red'?
display(box1)

Upvotes: 12

Views: 8360

Answers (1)

Sunil Lohar
Sunil Lohar

Reputation: 2242

You can do it using css:

%%html
<style>
.lbl_bg{
    width:auto;
    background-color:yellow;
}
.box_style{
    width:40%;
    border : 2px solid red;
    height: auto;
    background-color:black;
}
</style>

lbl  = widgets.Label(value=  'Test' )
# lbl  = widgets.HTMLMath(value=  'Test' ) # Alternate way using HTMLMath
lbl.add_class('lbl_bg')
hBox = widgets.HBox([lbl],layout=Layout(justify_content= 'flex-end'))
hBox.add_class("box_style")

Output :

enter image description here

Upvotes: 7

Related Questions