Log in to AnswerLog in to Follow
2019-11-11 11-30-58
Ankit Maharshi
26Views
5Comments
dropdown search in accordion not working properly in reactive
Question
Reactive
Application Type
Reactive

Dropdown search in accordion not working properly in reactive

If we use dropdown search In accordion than full list of dropdown search content will not show because of overflow property set as hidden on accordion.

 after that I replace,

.section-expandable .section-expandable-content {overflow: hidden;} 

to

.section-expandable .section-expandable-content {overflow: visible;}

Now Dropdown search list content shown properly but accordion UI getting disturbed when open and close to the accordion. 

Need to fix into the Outsystems UI.

DropDownSearch.png

1
0
01 Apr

Hi, have you tried giving the dropdown container a minimum height, let me know if it works. Greetings. 

Psd: To make it easier to help you, you could share an oml demo.

0
0
01 Apr

Hi @Cristian Angel Puma Villalva 

Thanks for your response. I have try this but content is hide because of Overflow: hidden

0
0
19 Apr
2019-11-11 17-10-24
Manish Jawla
mvp_badge
MVP

Hi @Ankit Maharshi,

I have attached the sample oml for you.

Please have a look, I hope this helps because for me drop down search is working fine with accordion.

Regards,

Manish Jawla

DempAppDropdown.oml

0
0
02 Apr

Hi @Manish Jawla,

Thanks for your response, but after clicking on the search drop-down, extra space will generate for remaining part and UI will disturb for the other element on expand and collapse. 

I have attached the sample PNG image  


extraSpace.png

0
0
19 Apr

Hi @Manish Jawla and @Cristian Angel Puma Villalva 

I have attached the oml file and I use this extra CSS to resolve this 

https://ankit-maharshi.outsystemscloud.com/DempAppDropdown/EmployeeslistanddetailwithoutList


CSS

.section-expandable-content .choices__list--dropdown.is-active {
    position: absolute;
}
.section-expandable .section-expandable-content {
    overflow: visible;
}
/*Dropdown will open at bottom side only*/
.is-flipped .choices__list--dropdown{
top: 100% !important;
bottom: auto !important;
}

/*Accordion expand and collapse animation speed*/
.section-expandable .section-expandable-content.is--expanded[aria-hidden="false"] {
    opacity: 1;
    transition-duration: 0s;
}
.section-expandable.is--closed .section-expandable-content.is--collapsed[aria-hidden="true"] {
    opacity: 0;
    transition-duration: 0s;
}
DropdownSolve.oml

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