Hello,
I have a reactive application that uses a dropdownsearch widget and would like to change its appearance via css. Any help with the different css scripts that help with the different parts of the dropdownsearch widget (height of widget/font size of dropdownlist/linespacing etc...) Thank you!
So you can change here below is the screenshot where you can change according to your need.
And also one thing use wrapper class or your own class instead of changing in the outsystem default class.
Need any help let me know!!
Regards,
Rajat
Hi Low,
Do you have any example how you want your dropdown search will look.
So according to that we will try with CSS and change it UI.
You can share how exactly it will look.
Hello Rajat,
Thank you for your reply. I would like for the dropdownsearch to look like:
1) Increased height of the widget (Looks bigger than the default height)
2) Increase font size for both selected option and the dropdownlist
3) Increase height/linespacing between each option in the dropdownlist
Thank you for your help on this!
Thank you again! I am able to change the height of the widget but cant seem to find how to change the other 2. Sorry I am weak at css and need abit more assistance on this!
For font size:
Line Height:
selected item line height:
Thank you so so much Rajat, its working great now !
Hello @Low Nico
Try this CSS:
Add custom class to the container and add below css and change font size and height as per our requirement:
.custom-dropdown .vscomp-toggle-button {
font-size: 25px;
}
.custom-dropdown .vscomp-option-text{
font-size: 16px;
.custom-dropdown .vscomp-wrapper.has-clear-button .vscomp-toggle-button{
height:48px
.custom-dropdown .vscomp-wrapper:not(.has-value) .vscomp-value{
font-size:16px;
.vscomp-options-container .vscomp-options-list .vscomp-option{
line-height: 20px;
height: 48px !important;
Thanks