How to remove padding in accordion
Application Type

Hello! I am working on an app where i use a list item inside an accordion. Problem is, that outsystemsUI  has automatic padding via variable in the accordionItem. I have not figured out how to either remove this or override it. 

Any ideas? It really messes up my ui layout.


Go to the class and remove the padding, once you found the class that have the padding,l you just need to put it on the module's theme and you will be able to override it.

For example, for the title, you just need to grab that class and put on the module's theme and insert the style

.section-expandable .section-expandable-title 



By doing this, you will be able to override it.

Let us know if this helps you, if not, please show an image of the place where you want to remove the padding. There are two places on the accordion with padding, so you follow the instructions that I gave you or you share an image of the right section where you want to remove the padding.

Kind Regards,


Hello and thanks for your answer! I have my accordion exactly like in your image and i have tried inserting the style in the css option in outsystems. For example, if i put just background-color: red; it works, but if i try to put "padding: 0;" or  unset etc. It wont work. 

EDIT: Nvm, i figured it out, i needed  to use .section-expandable-title  also in the css, thanks!

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