103
Views
6
Comments
Solved
How to set the dropdown arrow in center when dropdown height decreases using CSS ?
Application Type
Reactive

I need to decrease the height of dropdown widget in my screen, but the dropdown arrow is not aligned in the center of the dropdown.
On inspecting, I got that I need to edit the top style(from 15px to 5px) class of the "::after" section in the dropdown div:


So, the result is:How can I change this style class property of dropdown in outsystems to achieve the above?

UserImage.jpg
Nani
Solution

Hi Aman Kumar

Open The module which as a Dropdown and after open css in the module and paste the css class i have give below

.dropdown-container:after {    top: 5px; }


this will work and you change px number as you want

UserImage.jpg
Aman Kumar Bhardwaj

Thanks,
How can I decrease the size of this arrow  and move it to the rightmost corner using css?

2024-04-05 19-22-12
João Sousa

Hi there, 

I think if you create a new custom class in your theme for the after, and dropdown container classes and set the atrributes you need, you can then apply them to your dropdown instead of the native classes.

Hope it helps.

Kind regards,

João

UserImage.jpg
Aman Kumar Bhardwaj

Hi,

Can you share the custom class?

How can I set the after parameter in the class?

UserImage.jpg
Nani
Solution

Hi Aman Kumar

Open The module which as a Dropdown and after open css in the module and paste the css class i have give below

.dropdown-container:after {    top: 5px; }


this will work and you change px number as you want

UserImage.jpg
Aman Kumar Bhardwaj

Thanks,
How can I decrease the size of this arrow  and move it to the rightmost corner using css?

UserImage.jpg
Nani

It's a Default  css Classes for Dropdown and it will appply for every dropdown in that module.
so, create custom classes for dropdown icon and you can apply where every you needed instead using outsystem default classes

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