Hi, The height of the div that contains my MapView collapses to zero if I add the HTML5 DOCTYPE declaration, , 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 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. 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,

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Height of MapView Container div collapses with HTML5 declaration

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

<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dj_webkit dj_chrome dj_contentbox<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

In IE 11

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dj_trident dj_trident7 dj_contentbox<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Without HTML5 DOCTYPE:

In Chrome

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dj_quirks dj_webkit dj_chrome dj_contentbox<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

In IE 11

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dj_quirks dj_trident dj_trident7 dj_contentbox<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

<SPAN class="selector token"><style>
body</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Helvetica Neue"</SPAN>, Helvetica, Arial, sans-serif<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">min-height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>230, 247, 255<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">#viewMap</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 35%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

LA,

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

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">html,
&nbsp;&nbsp;&nbsp; body,
&nbsp;&nbsp;&nbsp; #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

That made it work correctly, thank you, Robert.

RobertScheitlin__GISP

LA,

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

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">html,
&nbsp;&nbsp;&nbsp; body,
&nbsp;&nbsp;&nbsp; #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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,

Tool.html.zip

RobertScheitlin__GISP

LA,

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.