topic Height of MapView Container div collapses with HTML5 declaration in ArcGIS JavaScript Maps SDK Questions

Height of MapView Container div collapses with HTML5 declaration

LA — Fri, 10 Dec 2021 21:43:01 GMT

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,

Re: Height of MapView Container div collapses with HTML5 declaration

RobertScheitlin__GISP — Wed, 28 Feb 2018 16:15:58 GMT

LA,

Can you put together a quick sample that demos your problem? I use <!DOCTYPE html> all the time without any issue.

Re: Height of MapView Container div collapses with HTML5 declaration

LA — Wed, 28 Feb 2018 16:56:14 GMT

Hi Robert,

I'm attaching my sample code without <!DOCTYPE html>, you can add it in the first line to see how the page renders differently.

Thanks,

Re: Height of MapView Container div collapses with HTML5 declaration

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:43:04 GMT

LA,

Just add this css rule to the very top of your style section (no need to change any other css rules you have):

    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }‍‍‍‍‍‍‍‍

Re: Height of MapView Container div collapses with HTML5 declaration

LA — Wed, 28 Feb 2018 17:17:46 GMT

That made it work correctly, thank you, Robert.

Re: Height of MapView Container div collapses with HTML5 declaration

RobertScheitlin__GISP — Wed, 28 Feb 2018 17:19:18 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.