tweak layout for jupyter widget output

Question

The code below enables a user to interactively display successive plots.

I wish to hide the title "Figure 1" and its gray box from this figure. I read this guide but doesn't find the answer.

import ipywidgets as widgets
from IPython.display import display, clear_output
from traitlets import CInt, link

class Counter(widgets.DOMWidget):
    value = CInt(0, sync=True)


counter = Counter()
def button_plus(name):
    if counter.value != passage_list[-1]  :
        counter.value = passage_list[passage_list.index(counter.value)+1] 
    else :
        print("last passage from the list")

def button_minus(name):
    if passage_list.index(counter.value) != 0  :
        counter.value = passage_list[passage_list.index(counter.value)+1] 
    else : 
        print("first passage from the list")


# 1 step forward button
wplus = widgets.Button(description='> Next passage')

# 1 step backward button
wminus = widgets.Button(description='Previous passage <')

# dropdown widget with passages timestamp
wpick = widgets.Dropdown(
    options=passage_list,
    value=passage_list[0],
    description='Passage:',
    disabled=False,
)
wplus.on_click(button_plus)
wminus.on_click(button_minus)

link((wpick, 'value'), (counter, 'value'));

#display(wminus, wpick,wplus)
ui = widgets.HBox([wminus, wpick,wplus])

out = widgets.interactive_output(plot2_passage, {'passage': wpick})

display(ui, out)

score 0 · Answer 1 · answered Mar 19 '19 at 08:34

0

I think that's using the default matplotlib notebook backend that gives the header bar. The interactivity allows you to pan / zoom the chart.

Try adding %matplotlib inline to the top of your cell. This should get rid of the grey bar, but you will likely lose the zoom / pan functionality.

answered Mar 19 '19 at 08:34

ac24

5,325
1
16
31

Thanks, but I tried and it doesn'nt change the grey bar. I finally edited the custom.css file. see my answer. – Brigitte Maillère Mar 19 '19 at 11:25

score 0 · Accepted Answer · answered Mar 19 '19 at 11:30

I ended with editing the custom.css file :

F12 in the browser to find which class is used for the grey bar : "ui-dialog-titlebar"
find custom.css : on windows , C:\Users\user.jupyter\custom\custom.css
add these lines at the end of the custom.css file :

.ui-dialog-titlebar { display : none; }

tweak layout for jupyter widget output

2 Answers2