WebSDK: problem with list-group-item under bootstrap 5

Hi there,

this is how my sidebar websdk looks under boostrap 4
these are simple derivated examples from the list-groups of the bootstrap web page that I wrapped in a xojo websdk.
Capture d’écran 2023-12-03 aĢ€ 17.04.42

and under bootstrap 5

Capture d’écran 2023-12-03 aĢ€ 17.05.37

I have two problems:
1/ the height of each list item is smaller un BS5. what property, style do I have to look for to make it like BS4 ?
2/ the contrast color of the selected line should be white, it is not under BS5. same: what style/property do I have to look to make it like BS4 ?

bonus problem(s):
the space between the icon and the text is not the same between the lines (same under BS4 or BS5)
can it be corrected and how ? I would like to align all the texts from the left.
I would like a small space at the right of the badge, and the left of the icon under BS5. how ?

thanks.

It looks like the list style isn’t being applied for some reason. You’ll have to figure that out yourself since you didn’t post any code at all. The documentation doesn’t suggest that the names changed, so I have no guesses.

It’s working perfectly fine in 2023r3.1 here:

Screen Shot 2023-12-03 at 11.35.32

1 Like

If you share a sample I’ll try to figure it out.

2 Likes

I will set up some demo project… thanks

1 Like

quick followup: it appeared I forgot to add the <ul> tag at the beginning of the list-group !
the list group under BS5 now looks like the BS4 one…

what is more fun is that I also forgot to add the <ul> tag in the bs4 version, but that it was displayed correctly anyway … go figure !

1 Like