To make the dropdown wider and ensure that the icon is properly aligned to the left in OutSystems, you can use custom CSS. Here are the steps you need to follow:

1. Add a Custom Class to Your Dropdown:

   • First, add a custom class to your dropdown widget. You can do this in the Properties panel of the dropdown by setting the Style Classes property to something like wide-dropdown.

2. Add Custom CSS to Your Module:

   • Go to the Interface tab and open the Theme used in your module.
   • Add the following custom CSS to make the dropdown wider and align the icon to the left:

/* Custom CSS for a wider dropdown */

.wide-dropdown select {

    width: 100%; /* Adjust width as needed */

}

/* Ensure the dropdown container is wide enough */

.wide-dropdown {

    width: 100%; /* Adjust width as needed */

}

/* Align the icon to the left */

.wide-dropdown::after {

    left: 10px; /* Adjust this value to position the icon as needed */

    right: auto;

}

3. Adjust the Dropdown Width:

   • You can adjust the width property to make the dropdown as wide as you need.

4. Adjust the Icon Position:

   • The left: 10px in the ::after pseudo-element can be adjusted to properly align the icon to the left side of the dropdown. You might need to tweak this value to achieve the desired alignment.

Hi budang haba ,

Click here to check

Create a dropdown inside the container and assign a unique class name to the container for example ( custom-dropdown ).

Add CSS to align the dropdown icon to the left and customize the code on the right as needed 

.custom-dropdown .dropdown-container:after

 {    top: 15px !important; 

   left: auto !important;  

  right: 16px !important;  

width: 10px !important;

}

refer the OML

can you share your oml

Hello

If you want to adjust the position of the dropdown arrow make the change to the right, left property of css on this class and add it to your theme or screen style sheet.

.dropdown-container:after {    
height: 8px;
left: auto;
right: 5px;
 top: 15px;
}

I hope this will help
Thanks
Tousif Khan

you can add the input with a position relative, without move positions and the icon with position absolute, so the icon will respect the parent container. After that, you can add top and right position

For example: 

input {

   position: relative

}

icon {

      position: absolute; 

      top : 10px;

      right: 10px;

}

Hi @budang haba,

Please refer the CSS of the oml.

Hope this helps!

Thanks,