I am new to ag-grid. I started with a basic example, but it did not work properly. I copied the code from ag-grid documentation as it is, then it worked. I wanted to know the mistake that I made in my code. Comparing line by line helped to find the issue. The last line that I removed was <!DOCTYPE html> from my code, then it started to work.
What is the problem caused by adding <!DOCTYPE html>?
This is down to the fact that when using DOCTYPE using standards mode, instead of quirks mode.
You can find a good explanation of this here: Why does my div height 100% work only when DOCTYPE is removed?
In essence if you want to use DOCTYPE (and you should) then you need to provide a height all the way down to the ag-Grid element.
In practice this means applying a height to the html and body:
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
After this if you use a % in the grid definition with DOCTYPE it will render as expected.
