Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
like image 643
qoqosz Avatar asked Apr 16 '18 18:04

qoqosz


People also ask

Which option we used to change the background Colour of any widget?

We can customize the tkinter widgets using the tkinter. ttk module. Tkinter. ttk module is used for styling the tkinter widgets such as setting the background color, foreground color, activating the buttons, adding images to labels, justifying the height and width of widgets, etc.

How do you interact in a Jupyter notebook?

At the most basic level, interact autogenerates UI controls for function arguments, and then calls the function with those arguments when you manipulate the controls interactively. To use interact , you need to define a function that you want to explore. Here is a function that returns its only argument x .


1 Answers

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

like image 132
SML Avatar answered Sep 22 '22 13:09

SML