0

I'm experiencing what seems to be a bug in Angular's ui-grid. My index.html page has this at the top:

<!DOCTYPE HTML[]>

When I run the app, the column headers of the grids scroll of the page:

enter image description here

Now, if I remove the brackets, like this:

<!DOCTYPE HTML>

The grid displays correctly:

enter image description here

Has anyone worked through this? Is there a fix?

Note: I could remove the brackets and leave it at that, but our deployment tool modifies the index.html file at deployment time and adds the brackets, because that's apparently well-formed HTML.

Bob Horn
  • 33,387
  • 34
  • 113
  • 219

1 Answers1

2

"Well-formed" is a concept that only makes sense in XML. In rough terms, it means that every element has an explicit start tag and an explicit end tag and they they are in the right places. It has nothing to do with the content of the Doctype declaration.

The latest version of the HTML specification says:

A DOCTYPE must consist of the following components, in this order:

  1. A string that is an ASCII case-insensitive match for the string "
  2. One or more space characters.
  3. A string that is an ASCII case-insensitive match for the string "html".
  4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
  5. Zero or more space characters.
  6. A ">" (U+003E) character.

… so the change your deployment tool is making is neither "well-formed" nor in any way correct.

Breaking the Doctype in that way triggers Quirks Mode. This makes browsers backwards compatible with the browsers of the late 1990s by emulating many of the bugs they featured.

The CSS is breaking because it depends on those bugs not being present.

You could probably rewrite all the CSS so it is designed to work in Quirks Mode, but fixing the deployment tool so it doesn't break the Doctype would be better.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I didn't realize the Quirks Mode thing. I thought the empty brackets were meaningless, based on the answer here: http://stackoverflow.com/a/6192048/279516. Looks like the answer directly below that one lists some options. Thank you! – Bob Horn Aug 08 '16 at 15:17
  • @BobHorn — They are fine when the Doctype is correctly formed, but in the position you have them, they trigger Quirks Mode. The other answer on that question doesn't help you, since you are loading the page in a browser and not trying to read it with a C# API for reading XML. – Quentin Aug 08 '16 at 15:18
  • In the position I have them? Can I change the position of something and avoid this issue? The reason the other answer could help me is because I could possibly alter our deployment tool to save the XML with a null doctype. – Bob Horn Aug 08 '16 at 15:22
  • You could use an HTML 4 Doctype (although then you couldn't use a validator for QA if you used any HTML 5 features). – Quentin Aug 08 '16 at 15:23
  • This answer worked perfectly: http://stackoverflow.com/a/16451790/279516. – Bob Horn Aug 08 '16 at 18:14