List unstyled

Wappler General Need Help
1

When i create a list-group in the app structure i can’t apply list-unstyled (does not work).
So i added the code (from bootstrap documentation) below in the code area :

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

But in this case it works, but i don’t see the list-group anymore in the app structure. If i add in the code the class list-group manually, it does not appears neither.

What is the best practice and how to deal with this? I guess it applies to other cases.

2

What version of Bootstrap is that? 4 or 5?
What class is added to the list group when added through the UI?

3

I’m using Bootstrap 5.
This is what I add in code manually and works as expected :

<ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto">
                                    <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white" dmx-show="">
                                </li>
                                <li class="d-flex align-items-center me-3">
                                    <svg class="bi me-2" width="1em" height="1em">
                                        <use xlink:href="#geo-fill"></use>
                                    </svg>
                                    <small>Earth</small>
                                </li>
                                <li class="d-flex align-items-center">
                                    <svg class="bi me-2" width="1em" height="1em">
                                        <use xlink:href="#calendar3"></use>
                                    </svg>
                                    <small>3d</small>
                                </li>
                            </ul>

code added with Wappler (and I add manually because I don’t know where to find it in wappler the list-unstyled class but does not work) and if I add the “list-group” class in my code above I does not work :

<ul class="list-group">
<li class=""></li>
</ul>
4

So the list-unstyled class is not added when you use the unstyled option in the UI?

5

I can add it manually but does not work with the list-group.
if I use this code, it works like a charm, but i don’t see the elements in the wappler app structure panel.

<ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto">
                                    <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white" dmx-show="">
                                </li>
                                <li class="d-flex align-items-center me-3">
                                    <svg class="bi me-2" width="1em" height="1em">
                                        <use xlink:href="#geo-fill"></use>
                                    </svg>
                                    <small>Earth</small>
                                </li>
                                <li class="d-flex align-items-center">
                                    <svg class="bi me-2" width="1em" height="1em">
                                        <use xlink:href="#calendar3"></use>
                                    </svg>
                                    <small>3d</small>
                                </li>
                            </ul>
6

Sorry I don’t understand what the issue exactly is. Is the issue that you try to add the unstyled list option in the UI it does not work?

I am not asking about the custom code you paste. I am asking about what’s the problem in the Wappler UI that you are having

7

When I add "list-unstyled" in the ul class, it does not work.

8

Are you referring to an option in the UI that does not work?

9

when I add “list-unstyled” (in the code as I don’t know where I can do it in Wappler) the result is not as expected, nothing changes and I still get the by default vertical list style, etc.

10

Ok, so that’s not an option in the UI which does not work, but an option which is actually missing from the UI?

11

Both.
I don’t see this option in the UI (or maybe it’s here, but I don’t see where).
But when I add the code manually if I don’t remove the Wappler “list-group” it does not work neither.

12

I see, so the unstyled option is missing from the UI. It will be added in the next updates after our summer break.

14

cool. Till then I will use my custom code (by knowing that I will not see the elements in the app structure panel) then.
Thanks @Teodor

15

Hi @George… is there any news on this? I am writing blog posts at the moment and want to add quite a few unordered bulleted lists… and it is a bit odd that they disappear from the App Structure when they are a perfectly valid HTML content structure…

(although saying that, I am using 3.9.7 at the moment as I can’t get text editing to work in v5 on my laptop… see another post about that…)