51
Views
3
Comments
How to giving padding to each option in a dropdown list as the list looks congested ?

I tried many scripts but finding it hard to give some space above each option so as to look good.

I tried to add custom css but its not making any difference.

2018-10-29 08-31-03
João Marques
 
MVP

Hi Shruti Pillai,


On your Dropdown widget, you have a property called Option Content. By default, the value selected is Text Only, which will make the options render in a browser-native experience:



You can change the value of Option Content to Custom, and now you will be able to define how each row will look, including adding other widgets:


This will turn the dropdown widget in a placeholder where you can drag the widgets and how you want each row to look like:


Kind Regards,
João

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

To achieve this you need to create a custom dropdown or use the one available in the forge

One example here - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

Alternative - 

You can use dropdown search or Serverside dropdown for the desired results it already has padding between two options.

Thanks
Tousif Khan

2023-09-01 17-38-12
Dhivakar Velumani

Hi Shruti

 After changing Options Content: text only to custom use the below CSS class to give padding as you want.

.dropdown-container .dropdown-popup-row {

padding: 16px 32px;

}

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.