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.https://imon-winaun.outsystemscloud.com/STRM/TestAccordion.aspx?_ts=637038775795174067

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

 

.accordion {
    margin-bottom: 10px;
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-neutral-4);
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-bold);
}

.accordion-item-header{
color:#444;
font-size: 12pt !important;
position: relative;
padding: 8px 0 2px 22px !important;
border-bottom: 2px solid #008cd6;
margin-bottom\:2px;
font-weight\: bold;
}
.accordion-item-header:before{
 content:"";
 position: absolute;
 top:0;
 left:0;
 display:block;
 width:8px;
 height:100px;
 background: #008cd6;
 }
 
.accordion-item .accordion-item-content {
    overflow:visible;      
    
}


Accordion works as its document explanation.

Version =OS version 11

Accordion = OutSystems UI,


Thank you in ahead,

Sincerely

EiMon

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. 

Cheers 

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,

Sincerely,

EiMon

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?

Cheers

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. :(


Sincerely,

EiMon

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. 

Cheers