Search code examples
htmlangularjsangular-ui-grid

Odd ui-grid bug with <!DOCTYPE html[]>

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.

Solution

  • "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.