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

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

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

Timothy de Vries wrote:

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

Hi



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