More simple questions (hopefully)! I'm trying to a...

# kvision

[Mark Fisher]

More simple questions (hopefully)!
I'm trying to achieve this output:

<li class="list-group-item d-flex justify-content-between align-items-center">
  Client Count
  <span class="badge bg-primary rounded-pill">3</span>
</li>

When I use the following, the text content of the li is put in after the span:

simplePanel(className = "bs-component") {
    ul(className = "list-group") {
        li(className = "list-group-item d-flex justify-content-between align-items-center") {
            content = "Client Count"
            span(className = "badge bg-primary rounded-pill") {
                content = "3"
            }
        }
    }
}

i.e. it's producing:

<li class="list-group-item d-flex justify-content-between align-items-center kv-text-start">
  <span class="badge bg-primary rounded-pill">3</span>
  Client Count
</li>

How do I get the content to be put in before the child span?

[Mark Fisher]

i.e. this is the output:

[Mark Fisher]

but with them the other way around it would render as:

[Mark Fisher]

I've tried adding the content as a parameter of the li() function, but it does the same

[Mark Fisher]

I've been able to achieve what I need with this:

li(className = "list-group-item d-flex justify-content-between align-items-center") {
    p(content = "Client Count", className = "m-0 p-0")
    span(className = "badge bg-primary rounded-pill") {
        content = "3"
    }
}

by not using the content for the li at all, and then fixing the class of the p element to look like the text would.
Hopefully there's a simpler way maybe?

[Mark Fisher]

(I'm just trying to emulate examples on https://bootswatch.com/darkly/ btw)

[Robert Jaros]

Instead of using "content", you can always add text nodes manually (and mix them with normal elements as you wish):

li(className = "list-group-item d-flex justify-content-between align-items-center") {
    +"Client Count"
    span(className = "badge bg-primary rounded-pill") {
        content = "3"
    }
}

[Robert Jaros]

plus operator is a shortcut for textNode()

[Mark Fisher]

Ah yes, this works. Excellent. I'm really enjoying this, thanks for your answers.
I see it's simple to use with values too, so

val myText = "Client Count"
+myText
textNode(myText)

both work here.