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ā€™eĢcran 2023-12-03 aĢ€ 17.04.42

and under bootstrap 5

Capture dā€™eĢ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