Html Encoding causing new lines in Chrome

Question

In my signup form, I'm using asp.net unobtrusive validation to check if a username exists. My JsonResult method returns the following if a clash is found:

This is already in use. How about \u003cstrong\u003efoo123\u003c/strong\u003e?

I use Microsoft's unobtrusive validation to display this in my view:

@Html.ValidationMessageFor(m => m.Username)

which causes it to appear as follows in the page source:

This is already in use. How about
<strong>foo123</strong>
?

As you can see, the text is split over three lines. This is not a problem in Firefox, but in Chrome these new lines are causing the displayed text to break in a similar manner to <br /> . I believe the encoding is to blame for this - can anyone explain why? Is there any solution to this issue?

Thank you in advance.

Answer 1

If they are displayed with line breaks on the actual page, then first thing I would do is inspect <strong/> tag and see if there is any CSS that defines it as display:block; or overrides white-space property.

If you are concerned about output of the DOM explorer... That's just how Chrome displays DOM trees. These three lines are each individual nodes (2 text nodes and one element node), so they are treated as equal. If you inspect the first paragraph of my answer, you will see the same thing.

Answer 2

Without having tried it, you could try to replace newlines in the string with... nothing?

@Html.ValidationMessageFor(m => m.Username).ToString().Replace(Environment.NewLine, "");

Feels really weird that would be the problem though since it's just in Chrome, double-check CSS rules. Or just surround the validation message in a p-tag?

Answer 3

try tweaking with css.

 \u003cdiv\u003e 
  This is already in use. How about \u003cstrong\u003efoo123\u003c/strong\u003e?
\u003c/div\u003e?

I think this is due the some padding issue. Upload the generated Html code of the page.