Dear All,


We are facing the problem in  accordion.


The problem is when we shrink the accordion, some of the widgets(web block and combo boxes) we usied in that accordion remains for a second in the main screen <can I call a widget shadow:) >.After a second, they disappear.I would not want to remain those widgets shadow even for a second.

Would you mind telling me how to fix it ?


Accordion works as its document explanation.

The widgets we using in the accordion are combo boxes ,web blocks and input widgets.

Version =OS version 11

Accordion = OutSystems UI, vertical accordion

Thank you in ahead.

Sincerely,

EiMon

Hi EiMon,

As per the above mention wedges, I tried and accordion is working perfectly fine.

If you can share the page link where this issue is comming I can further tell you what's the issue.


Regards,

Pankaj

Pankaj pant wrote:

Hi EiMon,

As per the above mention wedges, I tried and accordion is working perfectly fine.

If you can share the page link where this issue is comming I can further tell you what's the issue.


Regards,

Pankaj

Hello Pankaj pant 

Thank you so much for your quick reply.

I will ask my seniors in development team for how can we show this issue . Since  we are developing for the customer, there are some strict rules. Please give me some time.


Sincerely,

EiMon


 Hello 

Unusual thing is happening when we collapsed the accordion . 

We bring the example link https://imon-winaun.outsystemscloud.com/STRM/TestAccordion.aspx.

Please ignore the buttons in the accordion this time. 

Q1.What can we add to the CSS to collapse this accordion beautifully, right now the accordion remains some widgets images for a second.

Right now CSS is as follows.

/*override for accordion*/
.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;
}

Thank you in ahead,

Sincerely,

EiMon

Hi again ,

Let me add the specific details to my question.

The correct link is here.

Please ignore the comments of all above , if you would like to help me on  this case.

https://imon-winaun.outsystemscloud.com/STRM/TestAccordion.aspx?_ts=637038775795174067


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

Right now the widgets in accordion remain as the background for a second.

SyntaxEditor Code Snippet

.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-item {

 background-color: var(--color-neutral-0);

 border-bottom-width: var(--border-size-s);

}

 

.accordion-item:not(:last-child) {

    margin-bottom: var(--space-base);

}


2.We do not want to change the layout when the accordion is expanded .Please see the photo .eg. the select box margin is exceeded over the accordion margin.

Again & Again 

Sincerely,

Eimon