如何使用IWidgets的显示功能避免输出的缩小？

Question

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)

我想避免的是，正如您在下图中看到的那样，输出被缩小了，为了可视化它，我必须滚动它。 我尝试更改python的HTML代码，但不幸的是这种修改没有效果。 我也尝试使用这段代码：

result_output_widget = widgets.Output(layout={'height': 'auto', 'max_height': 'none'}) result_output_widget.add_class("output")

但仍然遇到问题。 我也尝试单击输出的 LHS，但没有任何结果。

我还能做什么？

Answer 1

在启动小部件之前，请输入以下内容：

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))

来源：https://github.com/jupyter-widgets/ipywidgets/issues/1791