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.

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