How to align the content in Gallery & text does not break to the next line?
Question
Application Type
Reactive

I am looking for a solution to make list-item to look like


Currently, it looks like

  • The items in the Gallery are aligned to the right instead of the middle
  • Another issue is that the text in Content/Tag will break to the next line


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;
}
Solution

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 

mvp_badge
MVP

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

Solution

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;
}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.