Using HTMLTemplate

Anvil Q&A
1

Hi. I’m a much better programmer than designer (which isn’t saying much :slight_smile: ) which is why I think I’m struggling with conceptualizing the use of HTMLTemplate.
I have a program that loops through a list, gets a count of matches in this list for words that match from another text box. I have some basic CSS for each Word - Number result I return - Blue background if it’s zero, green if it is more.

I can get the words back, but only one to a line. I had thought if I created the HTMLTemplate in a flow panel it might fill up the space available, but I was wrong.

This is probably pretty easy to solve, but I’m stumped. How can I put more than one result on row/line in a htmlComponent?

Here’s the relevant part of my code. Thanks for any help you can provide.

.answer {
  background: blue;
  color: white;
  font-size: 14px;
  padding:7px;
  border: 1px solid black;
  margin 5px;
}
.answer-already {
  background: green;
  color: white;
  font-size: 12px;
  padding:7px;
  border: 1px solid black;
  margin 5px;
}
self.html_component = HtmlTemplate()
self.colEntWords.add_component(self.html_component)

    for phrase in entList:
      x=strEditor.count(phrase)
      if x==0:
        reply=reply+'<div class="answer">'+ phrase+': '+str(x)+'</div>'
      else:
        reply=reply+'<div class="answer-already">'+ phrase+': '+str(x)+'</div>'
###I do other things here
self.html_component.html=reply
2

From https://www.w3schools.com/tags/tag_div.ASP:

Note: By default, browsers always place a line break before and after the <div> element.

Is <div> the only option for you?

3

Heh, no, it’s just the option I first ran with. That solves it.

Thanks for your quick and helpful answer.