topic Re: Add a header title bar in ArcGIS JavaScript Maps SDK Questions

Add a header title bar

RyanBohan — Tue, 08 Feb 2022 00:07:07 GMT

I am working on copying the look of the "Header Controller" for a webapp. The simple title bar with a logo. I am new to html and am sure there is an easy solution for this.

The issue I am running into, if I had the header to the webpage, the map section is slighter larger then the display page. (see scroll bar on image below)

If there is a better way to add a title and logo, more then happy to switch.

https://codepen.io/rbohan/pen/MWOJOEE

Re: Add a header title bar

RobertScheitlin__GISP — Tue, 08 Feb 2022 17:01:26 GMT

@RyanBohan

Then the Code for that:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Tab title</title> <style> html, body, #heading { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #0098db; } .header { text-align: left; background: #1abc9c; color: rgb(255, 255, 255); height: 44px; display: flex; align-items: center; font-weight: bolder; font-size: 24pt; } .header img { height: 40px; margin: 0 8px 0 8px; } #viewDiv { padding: 0; margin: 0; height: calc(100% - 44px); width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.21/"></script> <script> require(["esri/views/MapView", "esri/WebMap"], (MapView, WebMap) => { const webmap = new WebMap({ portalItem: { id: "f2e9b762544945f390ca4ac3671cfa72", portal: { url: "https://www.arcgis.com/" //AGO } } }); const view = new MapView({ map: webmap, container: "viewDiv", popup: { dockEnabled: true, dockOptions: { buttonEnabled: true, breakpoint: false, position: "top-right" } } }); view.ui.move(["zoom"], { position: "top-left", index: 3 }); }); </script> </head> <div class="header"><img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39024/preview.png" />Heading title</div> <body> <div id="viewDiv"> </div> </body> </html>

It best practice to do your styling with css in the style tag or a separate css file.

Re: Add a header title bar

RyanBohan — Tue, 08 Feb 2022 17:10:09 GMT

Thank you @RobertScheitlin__GISP,

I did not I could subtract the width of the header from the view dev height. Thank you again, and I will spend some time breaking down your code, it looks much cleaner then what I had.

height: calc(100% - 44px);

I added a fork to codepen to help anyone in the future with the issue. https://codepen.io/rbohan/pen/mdqWyOE