dropdownsearch inside accordion not working in reactive
Question
Application Type
Reactive

I'm using DropdownSearch inside According which is not allowing to see the dropdown values as the accordion breaks the values.

Hi Hanishq,

I have encountered the problem myself and have been able to solve it via CSS such as the solution suggested in this post: https://www.outsystems.com/forums/discussion/67355/reactive-dropdown-search-truncating-when-near-end-of-container/#

.choices__list--dropdown { position: relative; z-index:99; }

Let me know if that helps.

Hi Francisco Calderón,

This CSS is moving the below section down. But i want the Dropdown Search to be float over the below sections.


mvp_badge
MVP

Hi Hanishq,

I tried a bit of CSS tweaks for the mentioned use case. Check this DropdownTagsWithAccordion

  • Add custom extended style class to SearchDropdown and AccordionItem element as shown below 

  • Define the below-mentioned style definition in the respective Screen StyleSheet section

CSS Snippet

.is--expanded .custom-dd.choices{
    position: absolute;
    width: 564px; /* width: auto */
}

.custom-acc-item .section-expandable-content.is--expanded {
    min-height: 85px;
}

Limitation: 

If the selected options occupies/exceeds the max available width then the dropdown search will get overlaped to the below accordion.


I hope this helps you!


Kind regards,

Benjith Sam

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