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:
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.
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,
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
Eimon
Hi EiMon WA: did you find a solution for the issue you are facing? the similar issue I am facing if I apply CSS to change the collapsed height for accordian.~some of the widgets(web block and combo boxes) we used in the accordion remains for a second in the main screen