AnsweredAssumed Answered

Height of MapView Container div collapses with HTML5 declaration

Question asked by lalver1 on Feb 28, 2018
Latest reply on Feb 28, 2018 by rscheitlin

Hi,

The height of the div that contains my MapView collapses to zero if I add the HTML5 DOCTYPE declaration, <!DOCTYPE html>, but it has the correct height if I don't have the HTML5 DOCTYPE declaration. This happens both in IE 11 and Chrome. When I look at the developer tools in each browser, the only change I notice when the DOM is rendered is the following:

 

With HTML5 DOCTYPE:

In Chrome

<!DOCTYPE html>
<html class="dj_webkit dj_chrome dj_contentbox"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

In IE 11

<html class="dj_trident dj_trident7 dj_contentbox">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

 

Without HTML5 DOCTYPE: 

In Chrome

<html class="dj_quirks dj_webkit dj_chrome dj_contentbox"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

In IE 11

<html class="dj_quirks dj_trident dj_trident7 dj_contentbox"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

 

Some of my code is here, viewmap is the MapView container div.

<style>
body
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100%;
margin: 0px;
background-color: rgb(230, 247, 255);
}
#viewMap {
padding: 0;
height: 35%;
width: 100%;
}

 

Why is this happening? I would like to set my document to HTML5 but not have the map div collapse to zero height. Thanks,

Outcomes