187
Views
11
Comments
How to remove the padding of a List?

Hello, 

I am trying to put that 3 icons together with no margin ou padding, what kind of a class should i put on the css? I already use more than 5 different attemps with no success


I am not using the list item widget, i am using a container to display the data as you can see in the following print.


I already try all the solutions in this post (https://www.outsystems.com/forums/discussion/87444/list-item-spacing/) but didn't resolve my problem

2023-05-30 10-05-13
Lourenço Matalonga

Hello @Toretto ,

check on the icon properties and remove the left margin set to Auto to 0.

I am pretty sure that is your problem. If you have each of the icons inside a container also check the container left margin.

Hope this helps,

Lourenco Matalonga

UserImage.jpg
Pedro Ricarte

Hello @Lourenço Matalonga 

I also correct that before your comment to make sure that i made everything to correct that but with no success.

As you can see, the container and the icon have no margin or padding however, in the first print of the question, i already have that purple zone between the icons that i want to erase


2023-05-30 10-05-13
Lourenço Matalonga

change this property from Auto to 0px

2023-05-30 10-05-13
Lourenço Matalonga

Can you share oml pls?


UserImage.jpg
Pedro Ricarte

This module have sensitive client data, i am not able to share the oml

2023-05-30 10-05-13
Lourenço Matalonga

go to the icon class on the browser and add the margin-left: 0px; . Check if it fixes it. If it does, add the class margin-left-none to your icon widget as the image below:

 

UserImage.jpg
Pedro Ricarte

Sorry for the draw but is to hide the client data.

As you can see, I added the style, but nothing happens

I still have this purple zone

2023-02-03 11-00-49
Ruben Bernardo

Without taking a look at the module, and just by looking at the HTML, you have that extra space because your list widget is actually a (CSS) grid - in the print you just posted, in the div that contains the list and list-group classes just take a look at the end of that HTML line. Do you see a small tag saying grid?

The question is: why has your list widget a display: grid property? A list by default has display: block because it is a div. At the end it should look like this:

If you find the reason behind that you'll be able to customize that particular list and achieve the look & feel you want ;)

2023-05-30 10-05-13
Lourenço Matalonga

not in the div. It has to be in the icon class .fa

2023-05-30 10-05-13
Lourenço Matalonga

Hello @Toretto ,

where you able to solve your issue? If the answer is yes please mark the reply that helped you as the solution as this will help others in the future that face the same problem.

Thanks

2025-12-17 21-10-06
Shlok Agrawal

Remove padding from the icon styles, making changes in the container won't do anything, 

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