How to set alignment of each dropdown widget in Jupyter?

We will use HTML and CSS to align dropdown widgets in Jupyter. We may modify the alignment of the dropdown widget by adding certain CSS classes to it. This allows us to place the dropdowns in our Jupyter notebook either side by side or one below the other, making it seem visually attractive. Here is a simple method to help us align dropdown widgets in Jupyter and improve the user experience.

The following syntax is used in the examples −

Dropdown()

The Dropdown() is a built-in function that follows the module named ipywidgets and it builds the list of multiple items one by one.

Layout()

The function Layout() is an ipywidgets module class that allows users to customize the layout of a widget.

Select(multiple=True/False, items=[list_names], label='Select Letter',style_='width:300px')

The method Select() connects with dropdown widgets and has some parameters such as

• multiple − To set the value True means it allows to select the multiple options whereas false means it allows to select the single option.

• items − To set the list name for the dropdown widget.

• label − This parameter is a string that specifies the label for the dropdown menu. The label is displayed above the dropdown menu and helps to identify its purpose.

• style − This parameter specifies the width of the dropdown widget.

Btn()

The method Btn() is used to create the button of the drop-down widget and that accepts some parameters to style the button.

Installation Requirement −

pip install ipywidgets

The ipywidgets module contains interactive widgets for the Jupyter notebook. This command can be install using pip install.

Example 1

In the following example, we will create the two dropdown menus using the ipywidgets package. The first dropdown menu is labeled "BRAND" and has the item selection "Apple", "Xiomi", and "Redmi". The second dropdown menu is labeled "FIN-TECH" and includes "Phone Pay," "Bharat Pay," and "G-Pay" options. The show function from the IPython.display module is used to display both dropdown menus. The layout parameter and widgets are used to specify the layout of each dropdown menu.The layout class. The first dropdown menu is centred, and the second is positioned to the right.

import ipywidgets as widgets
from IPython.display import display
dropdown1 = widgets.Dropdown(
   options=['Apple', 'Xiomi', 'Redmi'],
   description='BRAND:',
   layout=widgets.Layout(width='70%', align_self='center')
)
dropdown2 = widgets.Dropdown(
   options=['Phone Pay', 'Bharat Pay', 'G-Pay'],
   description='FIN-TECH:',
   layout=widgets.Layout(width='70%', align_self='flex-end')
)
display(dropdown1, dropdown2)

Output

Example 2

In the following example, we will show multiple letters from the dropdown widget. It first mentions the package named ipyvuetify. Then it creates the button using the built-in method Btn that accepts some parameters like the color( to set the button color), children( to set the submit option), and style_( to set the width of the button) and store it in the variable button. Then the dropdown menu provides multiple options and includes the letters "A", "B", "M", "T", "H", and "K". The dropdown menu is labeled "Select Letter" and is 300 pixels width and stored in the variable dropdown. The dropdown menu and submit button are both rendered using v.Html elements with div tags and d-flex flex-row classes. As a final result, the submit button appears green with the text "Submit" and is 300 pixels width.

# Select multiple letters from the dropdown widget
import ipyvuetify as v
button = v.Btn(color='green',children=['Submit'],style_= 'width:300px')
dropdown = v.Select(multiple=True, items=['A','B','M','T','H','K'], label='Select Letter',style_='width:300px')
v.Html(tag='div',class_='d-flex flex-row',children=[
   v.Html(tag='div',class_='d-flex flex-row',children=[dropdown, button]) 
])

Output

Example 3

In the following example, we will show how to select a single list from a dropdown. It first import the module named ipyvuetify and take the object reference as v. Then initialize the button variable that stores the by creating button that accepts some parameters- color, children, and style_. Next, it will use the built-in method select that accepts some parameters like multiple( set to false means it allows to choose only one item from the dropdown list ), items( to set the list of state name ), and, label( that acts as a placeholder).

# Select a single list from dropdown
import ipyvuetify as v
button = v.Btn(color='blue',children=['Submit'],style_= 'width:100px')
button
dropdown = v.Select(multiple=False, items=['Maharastra', 'Telengana', 'Uttar Pradesh', 'Himachal Pradesh', 'Assam'], label='State Name')
dropdown

Output

Conclusion

We discussed the three different ways to Set the alignment of each dropdown widget in Jupyter. All the above programs generate a user interface with a dropdown menu and a submit button using the ipyvuetify module. This type of interface represents the new interactive experience of users that allows them to select multiple items from a list according to their choices.