Jupyter Widgets Formatting

Question

I am using the following code:

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

def f(x):
    return x

interact_manual(f, x='Hi there!');

It yields the following widget in the notebook:

The issue is that the text box has a fixed default size that is very small, I would like to increase the size of the text box so that the user's text does not get cutoff. I would also like to change the text shown on the button from the default "Run Interact" to something custom.

I have extensively gone over the documentation and looked online and I cannot find a single example of code that shows how you can set any kind of formatting for the interact/interact_manual function.

Is there any way to change the size of the text box and format other attributes of the widget?

Answer 1

Basics: pass in widget to specify options

The essential point is that you can pass a specific widgets into the interactive, interact, and interact_manual calls. Then because of that you can control the text box width like I do here.

Here is an example for interact():

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

text_input = widgets.Text(
        value="",
        description="Enter text here:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'), 
    )

def f(x):
    return x

interact(f, x=text_input);

That works with interact_manual(), too:

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

text_input = widgets.Text(
        value="",
        description="Enter text here:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'), 
    )

def f(x):
    return x

interact_manual(f, x=text_input);

This is covered under the 'Using Interact' page where there are a lot of illustrative examples. A couple particularly pertinent to the OP are presently found under 'interact_manual' where it has an example for interact_manual() of: interact_manual(slow_function,i=FloatSlider(min=1e5, max=1e7, step=1e5));. And then it has an example of interactive() that is similar, yet distinct, below it & that one shows passing in the specific widget: slow = interactive(slow_function, {'manual': True}, i=widgets.FloatSlider(min=1e4, max=1e6, step=1e4)).

---

Addressing customizing "Run Interact" text on the interact_manual() button

OP also said:

'I would also like to change the text shown on the button from the default "Run Interact" to something custom.'

For that here first assigns custom manual_name to the options for an instance of interact_manual() and then uses that to build in the other widgets.

Here is that approach combined in to the last code block example above:

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

text_input = widgets.Text(
        value="",
        description="Enter text here:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'), 
    )

def f(x):
    return x

my_customized_interact_manual = interact_manual.options(manual_name="Click here to proceed")
my_customized_interact_manual(f, x=text_input);

---

Addendum: How to pass in multiple widgets

This question was asked in reply in the comments:

"...what happens if my function has another argument that is a Boolean that generate a toggle box, how would I set the formatting for the toggle box?"

You would chain together passing in additional widgets with the settings you want, accomodating those in the function and referencing them in the interact() invocation.

from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets

text_input = widgets.Text(
        value="",
        description="Enter text here:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'), 
    )
checkbox_input = widgets.Checkbox(
        value=True, 
        description='Toggle True/False', 
        disabled=False, 
        indent=False)
# Checkbox options adapted from https://stackoverflow.com/q/75434840/8508004

def f(x, y):
    return x, y

interact(f, x=text_input, y=checkbox_input);

The top of this related complex example I wrote in reply to another question might help further illustrate this as well.