ipywidget interactive hiding visibility

Question

I would like to make an interactive module with ipywidgets. So far so good but I'm stuck. I want to hide the visibility of a certain ipywidget object dependent on a certain situation, and I want my printed text to show up above the widget and stay there.

dropdown=widgets.Dropdown(
    options={'Coffee machine': 1, 'Washing machine': 2, 'Water Heater': 3, 'Heating System': 4, 'Dryer': 5, 'Oven': 6, 'Microwave': 7, 'Other':8},
    value=1,
    description='Apparaat:',
    )
text_new=widgets.Text()
def text_field(value):
    if(value==8):
        display(text_new)
        text_new.on_submit(handle_submit)
    else:
        text_new.visible(False) #Doesn't work but I want something like this
print("Today you had an increase in electricity consumption, would you like to name this device?") #This just be above the dropdown menu and be stuck
i=widgets.interactive(text_field, value=dropdown)
display(i)

What this does now: When "Other" is checked in the dropdown menu, a text box appears where the user can type something. However, when checking another machine, the text box stays there. I just need a "hide" function but I can't seem to find one that works.

Also, after checking another option on the dropdown, the print dissapears, not coming back.

score 21 · Accepted Answer · answered May 09 '17 at 02:17

21

Had same problem so i found in

boton.layout.visibility = 'hidden'

or

check.layout.display = 'none'

they made some changes... i got if from here Cannot create a widget whose initial state is visible=False

answered May 09 '17 at 02:17

p1r0

418
6
10

4

Thank you @pir0, `boton.layout.visibility = 'hidden'` worked for me! Use `boton.layout.visibility = 'visible'` to make it visible again. – Ron Kalian Jun 21 '18 at 10:25
@RonKalian, there is a difference between the two answers: visibility='hidden' is keeping the bounding box of the field, whereas display='none' completely collapses the field, shifting upward the rest of the form. Btw the opposite is simply the js wording: display='block' – Myoch May 13 '23 at 00:12

score 11 · Answer 2 · answered Aug 04 '20 at 23:11

Given a widget:

import ipywidgets
button = ipywidgets.Button()

There are two direct ways to hide the the widget, with a notable difference.

Hide and unhide the widget without affecting overall page layout:

# Turn the widget "invisible" without affecting layout
button.layout.visibility = "hidden"

# Make the widget visible again, layout unaffected
button.layout.visibility = "visible"

Hide and unhide the widget and collapse the space that the widget took up:

# Hide widget and collapse empty space
button.layout.display = "none"

# Re-add the widget, adjusting page layout as necessary.
button.layout.display = "block"

When to use each one? As a rule of thumb, use layout.visibility so the page layout is not constantly jumping around as visibility is toggled. However, for very large widgets, consider using layout.display to avoid huge blank spaces.

For more general CSS information that applies here, see What is the difference between visibility:hidden and display:none?

score 6 · Answer 3 · answered Oct 18 '19 at 10:55

6

In addition to the accepted answer, if you want to dynamically change the visibility of a control, you can declare the layout variable and reuse.

layout_hidden  = widgets.Layout(visibility = 'hidden')
layout_visible = widgets.Layout(visibility = 'visible')

Like attach to an event:

def visible_txt(b):
    text_box.layout = layout_visible

def hidden_txt(b):
    text_box.layout = layout_hidden

btn_visible.on_click(visible_txt)
btn_hidden.on_click(hidden_txt)

answered Oct 18 '19 at 10:55

Duc Filan

6,769
3
21
26

Interesting... What would be the advantage of assigning the full layout object vs changing solely toggling the `visibility` directly? – ILoveCoding May 08 '20 at 14:43

ipywidget interactive hiding visibility

3 Answers3