Hello,
I currently have a list of materials that as shown below:
Steel and Iron are part of the list that I want to display horizontally. However, the spacing between these are too large. Is it possible to reduce the spacing? Thank you!
Hi,
I assume you are using the deprecated Tag widget version.
Cause: The padding style rule defined in the .tag style class definition is the reason for the additional spacing.
Solution: Define a custom style class to override the padding value of the predefined Tag style class. Set the Wrapper container with the tag-padding-s style class.
CSS Snippet:
.tag-padding-s .tag { padding: var(--space-xs); }
Demo screen: ListItemTask
Refer to the attached oml (covered Old/New Tag widget use).
I hope this helps you!
Kind regards,
Benjith Sam
You can try using built-in style classes like the below:
"list list-group display-flex column-gap-s"
Or try with some custom css rules
.list-item-col_style { display: flex; gap: 5px; }
Hello Benjith Sam,
Thank you so much for your suggestion. I tried both methods but it didnt seem to work. My current list looks like :
Does any of these components affect the styling? Thank you!
Thank you so much for the sample oml and explaining the cause and solution! I appreciate it, it solved my issue!
You're welcome, Nico.
Glad it helped you :)
it is very useful , but I faced an issue when I try to put the list inside a gallery widget, when applying this CSS style the gallery lost the controle of the rowItems number, and when I remove the css class it works, do you know why please ?