pythonmatplotlibwidgetdisplay

How to avoid the shrinkage of the output using the display function of ipywidgets?


import ipywidgets as widgets
from IPython.display import display, clear_output

# Create a dropdown widget for selecting the underlying

dropdown_style = {
    'description_width': 'initial',
    'padding': '10px',
    'border': '2px solid #ccc',
    'border-radius': '5px',
    'background-color': 'green',
    'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
    'font-size': '14px',
    'color': '#333'
}

underlying_dropdown = widgets.Dropdown(
    options=["AH", "CA", "ZS", "NI", "PB"],
    description='Select Underlying:',
    style=dropdown_style
)

# Create a dropdown widget for selecting the expiration date
expiration_dropdown = widgets.Dropdown(
    description='Expiration Date:',
    style=dropdown_style
)

# Create the "Display Results" button
calculate_button = widgets.Button(
    description='Display Results',
    button_style='info'
)

# Create output widgets to display the results
result_output_widget = widgets.Output(layout={'height': 'auto', 'max_height': 'none'})
result_output_widget.add_class("output")

# Define global variables for ct, pt, cy, and py
ct = None
pt = None
cy = None
py = None
cw = None
pw = None

# Define a function to handle the selection change in the underlying dropdown
def handle_underlying_change(change):
    global ct, pt, cy, py
    selected_underlying = change.new
    # Filter the DataFrame to get the rows for the selected underlying and 'CONTRACT_TYPE' equals 'LMEOption'
    underlying_df = df.iloc[-1][(df.iloc[-1]['UNDERLYING'] == selected_underlying) & (df.iloc[-1]['CONTRACT_TYPE'] == 'LMEOption')]
    # Extract unique expiration dates from the filtered DataFrame
    expiration_dates = underlying_df['FORWARD_MONTH'].unique().tolist()
    # Update options of the expiration date dropdown
    expiration_dropdown.options = expiration_dates
    ct = None
    pt = None
    cy = None
    py = None
    cw = None
    pw = None

# Attach the handle_underlying_change function to the underlying dropdown's observe event
underlying_dropdown.observe(handle_underlying_change, names='value')

def handle_calculate_button_click(button):
    
    with result_output_widget:
        clear_output()
        global ct, pt, cy, py
        selected_underlying = underlying_dropdown.value
        selected_exp_date = expiration_dropdown.value
        result = ripartizioneEOIprova(todayeoi, yeseoi, weekeoi, underlying=selected_underlying, exp_date=selected_exp_date)
        

# Attach the handle_calculate_button_click function to the button's on_click event
calculate_button.on_click(handle_calculate_button_click)

# Create HBox layout for the dropdowns and button
dropdowns_and_button = widgets.HBox([underlying_dropdown, expiration_dropdown, calculate_button])

# Set layout for each widget to auto height
for widget in dropdowns_and_button.children:
    widget.layout.height = 'auto'

# Arrange the widgets
container = widgets.VBox([
    dropdowns_and_button,
    result_output_widget
])

# Set layout for the container
container.layout.align_items = 'center'

display(container)

What I'd like to avoid is that, as you can see in the imagine below, the output is shrinked and to visualize it all I've to scroll through it. I tried changing the HTML code of python, but unluckly this modification is not effective. I also tried to use this code: result_output_widget = widgets.Output(layout={'height': 'auto', 'max_height': 'none'}) result_output_widget.add_class("output") but still got the problem. I also tried clicking on the LHS of the output, but nothing.

What else could I do?

Output shrinked


Solution

  • Before you initiate your widget put this:

    style = """
        <style>
           .jupyter-widgets-output-area .output_scroll {
                height: unset !important;
                border-radius: unset !important;
                -webkit-box-shadow: unset !important;
                box-shadow: unset !important;
            }
            .jupyter-widgets-output-area  {
                height: auto !important;
            }
        </style>
        """
    display(widgets.HTML(style))
    

    Source: https://github.com/jupyter-widgets/ipywidgets/issues/1791