CODEWITHSUNDEEP
pythonjupyter-notebookwidget
Luis Ramon Ramirez Rodriguez
Luis Ramon Ramirez Rodriguez

Reputation: 10383

Set the size of the boxes for Ipython wigets

I'm woring on a simple interface where I have a text box and an interactive plot. The idea of the text box in to used for some logs.

I'm able to get the plot and update the text from the same function, but my issue is that the text box is to large, I need to change its width.

Below is my current code and a screenshot of the result: 

from IPython.display import display
from ipywidgets import Button, Layout, Textarea, HBox, VBox
import numpy as np 
from ipywidgets import interact, interactive, fixed, interact_manual
import plotly.graph_objects as go

def f(x):


    x = np.arange(x)
    t1.value = "".join([str(c) for c in x.tolist()] )  
    fig = go.Figure(data=go.Scatter(x=x, y=x**2))
    fig.show()

x = np.linspace(10,100,1)


interactive_plot = interactive(f, x=(1, 20))
l = Layout(flex='0 1 auto', height='400px', min_height='40px', width='10')
t1 = Textarea(value='TA: height=40px', layout=l)

enter image description here

Upvotes: 0

Views: 4258

Answers (1)

amanb
amanb

Reputation: 5463

The layout attribute exposes CSS properties like height, width, border, margin of the ipywidgets. This allows one to control how the ipywidgets are laid out. It is possible to control the width and height of the textbox by tweaking the values in the Layout snippet below as required. The parameters accept values in pixels(px) or percentage of available space(%) or even 'auto' to allow these values to be set automatically. You can find an example in the docs. I've set the height as 30px and width as 'auto' to automatically set a width:

l = Layout(flex='0 1 auto', height='30px', min_height='40px', width='auto')

Output:

enter image description here

Upvotes: 1

Related Questions