I am looking for a solution to make list-item to look like
Currently, it looks like
I tried to use
justify-content: flex-start; [data-expression] { white-space: pre; /* both will cause overflow */ white-space: nowrap; }
.tag { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--color-neutral-0); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; font-weight: var(--font-semi-bold); height: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; min-width: 32px; padding: var(--space-none) var(--space-base); word-break: normal; }
Thanks, @Benjith Sam & @Purva Kumbhar for helping.
I have found a solution which is to add 'disable-virtualization: true' to the list.
You can refer to the following posts:
https://www.outsystems.com/forums/discussion/47072/list-disable-virtualization-property/
https://www.outsystems.com/forums/discussion/58784/reactive-app-list-widget-prepends-appends-empty-script-tags-carousel-issues/
And include to prevent line breaks :
[data-expression] { white-space: pre; }
Hi @Shu Yi ,
You can use container. this is resizable so what you want to look text You can use Inside container .
Thanks ,
Purva
Hi Shu Yi,
I tried the exact use-case using the List with Content/Tag widget, and it's working fine for me (i.e. no line breaks).
See this sample screen: ListItemContent
You can cross-check the widget tree hierarchy as shown below with your implementation
I have also defined an ExtenededClass for Content\Tag widget as shown-below.
CSS Snippet:
.custom-tag-style { background-color: #000; margin: 2px 5px; }
I hope this helps you!
kind regards,
Benjith Sam
Hi Benjith Sam
I think the alignment doesn't work the same when it is combined with adaptive/gallery
Any .oml file to implement this