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; } } }

Content Pane & Button Placements?

NMWater

Hi all!

I'm having a bit of trouble getting my home button to align correctly inside a content pane. I'm trying to place it under the zoom in/ zoom out button. Below is my CSS and my style. I tried placing it under my map div but that didn't work. Any suggestions?

Body:

CSS:

RESULTS:

Find more posts tagged with

Accepted answers

rscheitlin

Francisco,

The issue is in the comment inside your style block.

Change to this and you will be good to go:

  <style>
    html, body, #map{
      height: 100%;
      width:100%;
      margin:0;
      padding:0;
    }

    #HomeButton {
      display: block;
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 2;
    }
  </style>

All comments

NMWater

Hi Robert,

Thanks for all your help!

I added the class="map." However, I kept getting the following result.

NMWater

Hi Rickey, This is my code:

<!DOCTYPE html>

<html>

<head>

<title>Test Table</title>

<style>

html, body, #map{

height: 100%;

width:100%;

margin:0;

padding:0;

}

#HomeButton {

display: block;

position: absolute;

top: 90px;

left: 20px;

z-index: 2;

}

</style>

var map='';

require([

"esri/layers/FeatureLayer",

"esri/dijit/FeatureTable",

"esri/dijit/HomeButton",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ImageParameters",

"esri/geometry/webMercatorUtils",

"esri/map",

"dojo/dom-construct",

"dojo/dom",

"dojo/parser",

"dojo/ready",

"dojo/on",

"dojo/_base/lang",

"dijit/registry",

"dijit/form/Button",

"dijit/layout/ContentPane",

"dijit/layout/BorderContainer",

"dijit/form/TextBox"

], function (

FeatureLayer, FeatureTable, HomeButton, ArcGISDynamicMapServiceLayer, ImageParameters, webMercatorUtils, Map,

domConstruct, dom, parser, ready, on,lang,

registry, Button, ContentPane, BorderContainer, TextBox

) {

parser.parse();

ready(function(){

var myFeatureLayer;

var map = new Map("map",{

basemap: "streets",

center:[-105.89, 34.55],

zoom: 6,

showLabels : "True",

logo: false,

});

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

//This connects the Table to the Map

map.on("load", loadTable);

// This sets the image parameters from the RASTERS from the Map Service

var imageParameters =new ImageParameters();

imageParameters.format = "jpeg";

// This adds the RASTERS from the Map Service

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://128.123.187.240:6080/arcgis/rest/services/TEST_ET/ET_SSEB/MapServer",{

"opacity" : 0.95,

"imageParameters" : imageParameters

});

dynamicMapServiceLayer.setVisibleLayers([0]);

var layerDefinitions = [];

layerDefinitions[0] = "Year";

dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);

map.addLayers([dynamicMapServiceLayer]);

function loadTable(){

// Create the feature layer

myFeatureLayer = new FeatureLayer("http://128.123.187.240:6080/arcgis/rest/services/TEST_ET/ET_SSEB_YEARLY/MapServer/3", {

mode: FeatureLayer.MODE_ONDEMAND,

visible: true,

outFields: ["*"],

id: "fLayer"

});

//set map extent

on(myFeatureLayer, "load", function(evt){

var extent = myFeatureLayer.fullExtent;

if (webMercatorUtils.canProject(extent, map)) {

map.setExtent( webMercatorUtils.project(extent, map) );

}

});

map.addLayer(myFeatureLayer);

myFeatureTable = new FeatureTable({

"featureLayer" : myFeatureLayer,

"outFields": ["F2004","name"],

"map" : map

}, 'TestTable');

myFeatureTable.startup();

on(myFeatureTable, "load", function(evt){

console.log("The load event - ", evt);

});

myFeatureTable.on("show-statistics", function(evt){

console.log("show-statistics avgfield - ", evt.statistics.avgField);

console.log("show-statistics countfield - ", evt.statistics.countField);

console.log("show-statistics maxfield - ", evt.statistics.maxField);

console.log("show-statistics minfield - ", evt.statistics.minField);

console.log("show-statistics stddevfield - ", evt.statistics.stddevField);

console.log("show-statistics sumfield - ", evt.statistics.sumField)

});

myFeatureTable.on("row-select", function(evt){

console.log("select event - ", evt[0].data);

});

myFeatureTable.on("row-deselect", function(evt){

console.log("deselect event - ", evt[0].data);

});

myFeatureTable.on("refresh", function(evt){

console.log("refresh event - ", evt);

});

myFeatureTable.on("column-resize", function(evt){

//triggered by ColumnResizer extension

console.log("column-resize event- ", evt);

});

myFeatureTable.on("column-state-change", function(evt){

// triggered by ColumnHider extension

console.log("column-state-change event - ", evt);

});

myFeatureTable.on("sort", function(evt){

console.log("sort event - ", evt);

});

myFeatureTable.on("filter", function(evt){

console.log("filter event - ", evt);

});

}

});

</script>

</head>

</div>

</div>

</body>

</html>

rscheitlin

Francisco,

You should always place another div inside the ContentPane that has the id where you will place your map (don't give a contentpane the id="map"):

    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
      <div id="map" class="map">
        <div id="HomeButton"></div>
      </div>
    </div>

RickeyFight

Can you post all your code or send a link to your site?

NMWater

Hi Rickey,

I tried placing it the way you suggested it, still no luck though.

Any ideas what else could be causing the alignment?

Best,

Francisco

rscheitlin

Francisco,

This seems to work fine for me (I built an app based on the code you show):

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home Extent</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      display: block;
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 2;
    }
  </style>
  <script src="//js.arcgis.com/3.16/"></script>
  <script>

    require([
      "esri/map", 
      "esri/dijit/HomeButton",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map, HomeButton, parser
    )  {
      parser.parse();
      var map = new Map("map", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });

      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

    });
  </script>
</head>
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BoarderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
      <div id="map" class="map">
        <div id="HomeButton"></div>
      </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
      <div id="TesTable"></div>
    </div>
  </div>
</body>
</html>

kenbuja

Have you seen this sample?

Home Button | ArcGIS API for JavaScript

RickeyFight

This is where I have mine:

**I used the locate button in this example**

JS:

<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;">
                <div id="LocateButton"></div>
                <div id="HomeButton"></div>
            </div>

CSS:

       #LocateButton {
                position: absolute;
                top: 95px;
                left: 20px;
                z-index: 50;
            }

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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