Add a header title bar

RyanBohan · ‎02-07-2022

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

RobertScheitlin__GISP · ‎02-08-2022

@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.

View solution in original post

RobertScheitlin__GISP · ‎02-08-2022

@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.

RyanBohan · ‎02-08-2022

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