Dear ALL 

Our  problem is when the accordion gets collapsed , the widgets in the accordion remain like a shadow for a second.

Please check this link.

Q.What can we add to the CSS to collapse this accordion beautifully?.


.accordion {
    margin-bottom: 10px;
} {
    border-top: var(--border-size-m) solid var(--color-neutral-4);
} .accordion-item-header {
    font-weight: var(--font-bold);

font-size: 12pt !important;
position: relative;
padding: 8px 0 2px 22px !important;
border-bottom: 2px solid #008cd6;
font-weight\: bold;
 position: absolute;
 background: #008cd6;
.accordion-item .accordion-item-content {

Accordion works as its document explanation.

Version =OS version 11

Accordion = OutSystems UI,

Thank you in ahead,



Hi Eimon, 

Did you added the overflow:visible:? 

This seems to be the problem. I would try to remove it if I added or overwrite it to not allow overflow. 


Dear Eduardo 

Accordion gets collapsed clearly. Thank you.

But due to this change,it affects on the select box. 

Q.How can  the select box margin line  exceed the accordion margin line area? 

1.Before remove the overflow in css

2.After remove the overflow in css

Thank you again,



Hi EiMon,

I took a look and find a possible workaround. You need to see if it works for you.

Add the following CSS to your page or Theme StyleSheet:

.choices__list--dropdown {
    position: initial;

This CSS will have the following effect:

Is this acceptable?


Dear Eduardo 

Thank you So much for using your time on this case.

The result is still a little different.

The customer do not want the accordion size gets larger when the select box is clicked. :(



Hello Eimon, 

Though audience that of yours, no? :D

The dropdown select creates the drop down edit input and list using an absolute positioning. 

To make what you want, you would have to change the CSS of the accordion itself. And I don't know if it is possible at all, or if any solution will end up with more unwanted side effects, even harder to solve. 

I'm sorry, but at this moment I'm not able to digger deep.

You can tell them to accept what they can get right now, or you can wait to see if someone else more skilled or experienced has a ready solution, or you can spend a few hours trying to solve this, looking into the HTML and trying to figure out how to place the dropdown correctly. 

In the near future I may have the time to look into it. Just not right now. Sorry. 

Hope someone else can help you. 


Hi Eduardo,

I am facing the same issue as EiMon above describes. I tried the overflow : visible on the accordion, it works for the visibility of the dropdownsearch but it makes the fields flicker on folding the accordion. The other css (position : initial) workaround is not acceptable for us either as it messes up the screen layout. I also tried to change the z-index of the dropdownsearch, with no positive result.

Do you know if there will be any solution - or acceptable work around that not changes the screen layout - for this issue?

Hi EiMon,

I have been through the same problem, but it seems that there's no way to overide the overflow:hidden with only CSS, so to show the content out of the accordion content I have made the same as you:

.accordion-item .accordion-item-content {

But I have the same problem with the oppening animation, so i tried using this to minimize the perception of the colateral problem of using overflow:visible;

.accordion-item .accordion-item-content{
.accordion-item .accordion-item-content div{
      opacity: 0;
.accordion-item div{
     opacity: 1;
     transition: opacity .15s linear .15s;

I took out the overflow:visible; of this selector (.accordion-item .accordion-item-content) because, in my case, it increased the height of the accordion content even if it is colapsed.

Then I tried to fade (with opacity and transition) my content by creating a container inside the accordion content.

Hope it works for you.