List unstyled

Wappler General How To
#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.

#13
#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

Recognising List Unstyled Class
#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…)