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.
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
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.
ThanksTousif Khan
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;
}