Accordion vertical icon

Back to Forums

Carlos Messias

Question

Hi,

Is there any way to put the vertical accordion icon on the left side? By default it always appears on the right side.

Regards

Carlos Messias

24 Apr 2019

Daniël Kuhlmann

MVP

Hi Carlos,

Assuming you are using OutSystems UI, than that is easy to do with a little bit of css:

.accordion-item .accordion-item-header {
    flex-direction: row-reverse;
}

.accordion-item .accordion-item-title {
    padding-left: var(--space-base);
}

This is taken from the following documentation link:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Content/Accordion

Regards,

Daniel

24 Apr 2019

Timothy de Vries

Hi Carlos,

Daniël's answer is the right one, but i would expand it slightly. If you want to use both types of accordions in your application you can slightly change the CSS provided by Daniël and use the "ExtendedClass" input parameter of the Accordion/Accordion-item widget to control the placement of the arrow.

Using the following CSS, you can use the ExtendedClass "accordion-arrowleft" on either the Accordion (to place all arrows in the accordion to the left) or specific Accordion-items to place their arrow to the left.

.accordion.accordion-arrowleft .accordion-item .accordion-item-header,
.accordion-item.accordion-arrowleft .accordion-item-header {
    flex-direction: row-reverse;
}

.accordion.accordion-arrowleft .accordion-item .accordion-item-title,
.accordion-item.accordion-arrowleft .accordion-item-title {
    padding-left: var(--space-base);
}

Regards,

Timothy

24 Apr 2019

1 reply

25 Apr 2019

Show thread

Hide thread

Carlos Messias

Timothy de Vries wrote:

Hi Carlos,

.accordion.accordion-arrowleft .accordion-item .accordion-item-header,
.accordion-item.accordion-arrowleft .accordion-item-header {
    flex-direction: row-reverse;
}

.accordion.accordion-arrowleft .accordion-item .accordion-item-title,
.accordion-item.accordion-arrowleft .accordion-item-title {
    padding-left: var(--space-base);
}

Regards,

Timothy

Thanks for your answers. Unfortunately your suggestions did not work. I'm using the dublin theme, with the following css:
.AccordionVertical ___ icon {
border-left: 1px solid #ccc;
display: table-cell;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
-servicestudio-width: 30px;
}
.AccordionVertical__header {
display: table;
padding: 0px 0px;
width: 100%;
}
.AccordionVertical ___ icon> .fa {
background-color: transparent;
border: 1px solid #ccc;
color: # 999;
font-size: 8px;
height: 8px;
width: 8px;
}
.AccordionVertical_item.open> .AccordionVertical__header> .AccordionVertical ___ icon> .fa {
background-color: transparent;
border: 1px solid # 666;
border-radius: 16px;
color: # 666;
height: 12px;
-webkit-transform: rotate (-180deg);
-ms-transform: rotate (-180deg);
transform: rotate (-180deg);
width: 12px;
}

.AccordionVertical ___ title {
color: # 253b4a;
background-color: # f8f8f8;
display: table-cell;
font-size: 1px;
line-height: 2px;
width: 100%;

}

The way I tested it was as follows:
.AccordionVertical-item .AccordionVertical__header {
flex-direction: row-reverse;
}

.AccordionVertical-item .AccordionVertical ___ title {
padding-left: var (- space-base);
}

Regards

Carlos Messias

25 Apr 2019

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

See the full guidelines