How to set alignment of each dropdown widget in Jupyter?
Last Updated :
25 Jul, 2022
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.
Below is the complete implementation:
Python3
from ipywidgets import Layout, Box, Dropdown, Label
form_item_fruits = Layout(
display = 'flex' ,
flex_flow = 'column' ,
align_items = 'flex-end' ,
border = 'solid' ,
width = '70%'
)
form_item_vegetables = Layout(
display = 'grid' ,
flex_flow = 'row' ,
align_items = 'flex-start' ,
width = '80%'
)
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)
]
dropdown = Box(form_items, layout = Layout(
display = 'flex' ,
flex_flow = 'column' ,
border = 'solid 2px' ,
align_items = 'center' ,
width = '80%'
))
dropdown
|
Output:
Share your thoughts in the comments
Please Login to comment...