B4J Question [Solved][BANano] Odd <br> handling

[OliverA]

I'm having no luck with Append and RenderAppend and the handling of <br> tags

BANano.GetElement("Body").Append("Break")
BANano.GetElement("Body").Append("<br>")
BANano.GetElement("Body").Append("On its own")
BANano.GetElement("Body").Append("<br>Text after")
BANano.GetElement("body").Append("Text before<br>")
BANano.GetElement("Body").Append("<br> Text after")     ' This one and the next one are just to see if spacing makes a difference
BANano.GetElement("body").Append("Text before <br>")
BANano.GetElement("body").Append("Break<br>in the middle")

I'm expecting:

Break
On its own
Text afterText before

 Text afterText before
Break
in the middle

But I'm getting

Break
On its own
Text before<br>
Text before <br>Break<br>in the middle

Notice how any appends that start with <br> and some text after the tag don't even show up. The only <br> that seems to work correctly is when it is used on its own without any text before or after the tag. Using RenderAppend instead of Append produced the same results.

Update: As soon as I posted this, I noticed that sometimes I used "body" and sometimes "Body". Changing all items to lower case did not change the result.

Environment information:
Windows 10 Pro 64-bit (1809)
B4J 7.32 using JDK 11.01
BANano 2.39
Chrome 74.0.372.131 (Official Build) (64-bit)
Firefox 66.0.4 (64-bit)
Web server: B4J jServer with files produced by BANano placed within the www folder

 

[alwaysbusy]

It looks like this is a limitation of the Umbrella.js library. If it starts with text (a non html tag), it considers all the rest as text.

So, or you use seperate appends:

BANano.GetElement("#body").Append("Break")
BANano.GetElement("#body").Append("<br>")
BANano.GetElement("#body").Append("On its own")
BANano.GetElement("#body").Append("<br>").Append("Text after")
BANano.GetElement("#body").Append("Text before").Append("<br>")
BANano.GetElement("#body").Append("<br>").Append(" Text after")     ' This one and the next one are just to see if spacing makes a difference
BANano.GetElement("#body").Append("Text before ").Append("<br>")
BANano.GetElement("#body").Append("Break").Append("<br>").Append("in the middle")

Or you make sure it starts with a tag (e.g. with a div or span):

BANano.GetElement("#body").Append("Break")
BANano.GetElement("#body").Append("<br>")
BANano.GetElement("#body").Append("On its own")
BANano.GetElement("#body").Append("<br>Text after")
BANano.GetElement("#body").Append("<div>Text before<br></div>")
BANano.GetElement("#body").Append("<br> Text after")     ' This one and the next one are just to see if spacing makes a difference
BANano.GetElement("#body").Append("<div>Text before <br></div>")
BANano.GetElement("#body").Append("<span>Break<br>in the middle</span>")

Or (but still the same rule: it must start with a html tag, div in this case)

Dim text As String = $"<div>Break
<br>
On its own
<br>Text after
Text Before<br>
<br> Text after
Text Before <br>
Break<br>in the middle</div>"$

 BANano.GetElement("#body").Append(text)

 

[OliverA]

It looks like this is a limitation of the Umbrella.js library. If it starts with text (a non html tag), it considers all the rest as text.

Some more testing confirms this

Or you make sure it starts with a tag (e.g. with a div or span):

More testing refines this rule. It must start with an html tag that has a corresponding ending/closing tag. So div, span, h1 will work, but if you start the text with tags such as br, hr, wbr that have no corresponding end/closing tag, then all the text after those tags will disappear. So for circumstances were these (singleton) tags need to be used at the beginning of some text to be displayed via Append/ResolveAppend/etc, the tag and the text should use a separate call to the corresponding method, as shown in your first example and repeated here:

BANano.GetElement("#body").Append("<br>").Append("Text after")

 

[alwaysbusy]

have no corresponding end/closing tag, then all the text after those tags will disappear.

You seem to be correct, hadn't noticed that.

 

[alwaysbusy]

I will send you a new version (2.46) later today to test where I modified the methods in the Umbrella js library so it allows such <br> tags to be used as you would expect in your original post.

The only thing that will be ignored is the space thingy (but this is normal HTML behaviour so I rather don't touch that). You will need to use &nbsp; (a non breakable space) if you want that effect.