How to set alignment of each dropdown widget in Jupyter?
In this article, we are going to see how to set the alignment of each dropdown widget in Jupyter.
A standard widget in Jupyter which consumes less space and helps you to select an element is known as a dropdown widget. Do you want to set the alignment of your dropdown widget? The property of a dropdown widget that helps you to align items is align_items. The values that this property acquires are center, flex-start, flex-end, stretch, etc. In this article, we will discuss how to set the alignment of each dropdown widget in Jupyter.
Syntax:
form_item_fruits = Layout(align_items=’flex-end’, #Other values of align_items: center, flex-start, flex-end, stretch)
#Other values of align_items: center, flex-start, flex-end, stretch
Stepwise Implementation:
Step 1: First of all, import the library ipywidgets.
Python3
from ipywidgets import Layout, Box, Dropdown, Label |
Step 2: Now, create a function for displaying the dropdown 1.
Python3
form_item_fruits = Layout( display = 'flex' , flex_flow = 'column' , align_items = 'flex-end' , border = 'solid' , width = '70%' ) |
Step 3: Then, create another function for displaying the dropdown 2.
Python3
form_item_vegetables = Layout( display = 'grid' , flex_flow = 'row' , align_items = 'flex-start' , width = '80%' ) |
Step 4: Moreover, create dropdown 1 and dropdown 2.
Python3
form_items = [ Box([Label(value = '#Dropdown-1' ), Dropdown(options = [ 'Item-1' , 'Item-2' , 'Item-3' ])], layout = form_item_fruits), Box([Label(value = '#Dropdown-2' ), Dropdown(options = [ 'Item-1' , 'Item-2' , 'Item-3' , 'Item-4' ])], layout = form_item_vegetables) ] |
Step 5: Further, display the dropdowns in a box.
Python3
dropdown = Box(form_items, layout = Layout( display = 'flex' , flex_flow = 'column' , border = 'solid 2px' , align_items = 'center' , width = '80%' )) |
Step 6: Finally, call the widget box.
Python3
dropdown |
Below is the complete implementation:
Python3
# Python program to set alignment # of each dropdown widget in Jupyter # Import the library ipywidgets from ipywidgets import Layout, Box, Dropdown, Label # Function for displaying of dropdown 'Fruits' form_item_fruits = Layout( # Other values of display:flex, grid display = 'flex' , # Other values of flex_flow:row,column flex_flow = 'column' , # Other values of align_items: # center, flex-start, flex-end, stretch align_items = 'flex-end' , border = 'solid' , width = '70%' ) # Function for displaying of dropdown # 'Vegetables' form_item_vegetables = Layout( # Other values of display:flex, grid display = 'grid' , # Other values of flex_flow:row,column flex_flow = 'row' , # Other values of align_items: # center, flex-start, flex-end, stretch align_items = 'flex-start' , width = '80%' ) # Creating dropdowns 'Fruits' and 'Vegetables' form_items = [ Box([Label(value = 'Fruits' ), Dropdown(options = [ 'Apple' , 'Mango' , 'Banana' ])], layout = form_item_fruits), Box([Label(value = 'Vegetables' ), Dropdown(options = [ 'Brinjal' , 'Tomato' , 'Carrot' , 'Beans' ])], layout = form_item_vegetables) ] # Displaying of dropdowns in box dropdown = Box(form_items, layout = Layout( display = 'flex' , flex_flow = 'column' , border = 'solid 2px' , align_items = 'center' , width = '80%' )) # Calling the widget box dropdown |
Output:
Contact Us