i have dropdown as per attachment i need reduce height for this dropdown
how i can to do this as per oml attachment
Hi Andrew,
Height of options in a <select> dropdown cannot be directly controlled using the CSS due to browser limitations. However, you can achieve a reduced height by changing the dropdown property options content from "Text" to "Custom".
And in the next step, you can adjust the height using this CSS: .dropdown-expanded-down div.dropdown-list {
max-height: 100px;
overflow-y: auto;
}I have attached the OML file for your reference.
when i click open dropdown I always need to open it to the bottom.
how i can do this
Yes, since we are using a custom drop-down and this option container already has top: 100%, it will always appear at the bottom.
Hi,
Please try using the below CSS
.dropdown-menu {
max-height: 200px; /* Adjust height as needed */
overflow-y: auto; /* Adds a scrollbar if content exceeds height */
}
Hi All,
Could you please share the reason for the dislike? I included this CSS because we recently used it in a project. If you disagree with the comment, kindly provide your feedback or the reason in the comments.
I downvoted it because it does not solve the question asked.
The question is about a dropdown
@Faais ,
It is not really necessary to add the overflow-y rule, because OutSystems UI already has this styling :
.dropdown-container > div.dropdown-list { border: var(--border-size-s) solid var(--color-neutral-4); border-radius: var(--border-radius-soft); -webkit-box-shadow: none; box-shadow: none; left: 0 !important; max-height: 300px; overflow-y: auto; position: absolute; width: 100% !important; }
.dropdown-container > div.dropdown-list {
so all you need to do is choose another max-height if 300 is not desired.
Why did you choose to select dropdown-expanded-down instead of just dropdown-expanded ?
I would personally try to stick to the same selector like is already used in OutSystems UI, so for example
.dropdown-container > div.dropdown-list { max-height: 180px; }
Dorine
Hi @Dorine Boudry, I agree with the overflow property but the outsystems UI selectors and mine are targeting the same element.
yes, I'm not saying yours won't work, but for simplicity, I like uniformity. That's a matter of taste.
Actually, yours only work when the options go below the input, not when they go upwards. (see my question about dropdown-expanded-down vs. dropdown-expanded)