List item width percentage not working for first and second element
Application Type
Reactive
Service Studio Version
11.11.13 (Build 47944)

Hi,

I'm currently making a login portal for a couple of applications. So first I made a list with small blocks by setting the list item width to 2 col. Which was too big and shortened it to 1 col. But that was too small. So I wanted something in between. I know percentages worked in the past for traditional applications. But in this current case it doesn't. The first two list items don't get any width and every other list item after those two will get a width in percentage. It also only happens when I try to set them in percentage. Is this a bug?

Kind regards,

Bo

BCPortal.oml

mvp_badge
MVP
Solution

Hi Bo,

The observation that you had is because of the virtualization concept applicable for the List widget. If the List widget disable-virtualization property is defined to True value, then it will work as expected.

Instead, I would suggest you avoid defining the inline-CSS declaration to the parent div/container inside the List widget and include the same style statement as a part of the style class definition defined to the container i.e.

CSS Snippet:

.bcp-applicationlist-itemwrapper {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid red;
    width: 10%;
}


Also, I observed a small mistake in the defined style class definition in the Block styelsheet section - an additional (;) symbol

See this demo: ListStylingTask

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

BCPortal.oml

Hi Benjith Sam,

Thanks for the quick solution! This is exactly what I needed.

And I also added the width to the style class. And thanks for pointing me out some of my typing mistakes.

Kind regards,

Bo

mvp_badge
MVP

You're welcome, Bo

Glad to help you :)


Kind regards,

Benjith Sam

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