Listgroup (Bootstrap) item spacing

1

I use a simple loop to fill a Bootstrap Listgroup.

for (i = 0; i  <= 14; i ++)
{
  ListGroup1.addItem( i);  
  NSB.$("ListGroup1_" + i).innerHTML = "Test " + i + "<span class=" + '"' + "badge badge-primary" + '"' + ">"  +   i   +  "</span></button>";                       
}

When i run it with Chrome on my PC, it looks like this
image

but when i run the same thing on my phone, it looks like this (the items are squashed up)
image

The ListGroup height is set to ‘auto’ and the style property has the following:

max-height: calc(100% - 150px); overflow:scroll;

Any help on why this is the case is greatly appreciated. Thanks

2

In the Chrome Tools, have a look at the control in the Elements tab. If you look at the Styles window which displays, you can see what CSS is affecting the control.

Share your story with the AppStudio Community! Quarantine Stories

3

I had the exact same issue on iOS , this worked for me, put this code in the css

.list-group-item {
flex-shrink: 0;
}
4

Thanks for your replies.
flex-shrink solved the problem.