How to place combo box within footer

GeoffreyWest · ‎10-22-2014

Using ArcGIS JS API, what is the proper method of embedding a combo box into the footer? Footer ends up at top of page with a strange box element next to my combo box.

 <table>
            <td>
             <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
               <td align="left" style="width: 70%">
                                                <select id="Select1" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"
                                                    style="width: 250px; background-color:Black; font:black;  color: white;" onchange="ValidateRequestType">
        


      </div></td></table>



      #footer {
        border: solid 1px #7EABCD;
        background-color:white;color:peru;font-size:10pt; text-align:center; height:250px; width: inherit; 
      }

SteveCole · ‎10-22-2014

I think we'd need to see more of your HTML to comment more. You have the contentPane embedded in a table, but where is the table element located in the grand scheme of things? If the table is in a contentPane which is specified as top/left/center/right, then your combo box won't show up what you think is the bottom of the page's layout.

You have to keep in mind the nesting aspect of DIVs when layout out HTML elements. This can definitely get pretty complicated to set up what you want. This link in the API guide has a couple graphic illustrations of the basic layout "regions" of Dojo.

GeoffreyWest · ‎10-22-2014

Hi Steve,

My goal is to create a footer or nav bar towards the bottom of the page which will contain 6 columns of 11 combo boxes.

Here is the more of my HTML without any nav bar or footer element.

For whatever reason my HTML highlighting is not appearing.

<div id="divMainContainer" dojotype="dijit.layout.BorderContainer" design="headline"

gutters="false" style="width: 100%; height: 100%; position: relative">

<div id="map" class="map" region="center" dojotype="dijit.layout.ContentPane"</

SteveCole · ‎10-22-2014

Looks like you're still using an older API version. I had to dig around for one of the older legacy style samples but here's a modified version which you can look at for what you're trying to accomplish:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/esri/css/esri.css">
    <style>
        html, body {
          height: 97%;
          width: 98%;
          margin: 1%;
        }
        #mainWindow, #header, #map, #rightPane, #leftPane, #footer {border: 1px solid #606060;}
    </style>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.3/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("dijit.form.ComboBox");
      var map;


      function init() {
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-118.404, 34.054],
          zoom: 11
        });
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="background:#EEEEEE;width:100%;height:100%;">
      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:100px">
        This is the header section
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane" style="width:100px;height:100%">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'">
          Content for pane 1
        </div>
      </div>
      <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:500px;height:700px">
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane" style="width:100px;height:100%;">
        This is the right section
      </div>
      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;width:100%">
        Make a selection from any of these combo boxes:<br/>
        <table>
            <tr>
                <td>
                    <select id="Select1" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select2" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select3" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select4" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select5" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select6" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
            </tr>
            <tr>
                <td>
                    <select id="Select7" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select8" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select9" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select10" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select11" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>            
            </tr>
        </table>
      </div>
    </div>
  </body>
</html>

SteveCole · ‎10-22-2014

ARGH. I *HATE* these new forums. Trying again:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/esri/css/esri.css">
    <style>
        html, body {
          height: 97%;
          width: 98%;
          margin: 1%;
        }
        #mainWindow, #header, #map, #rightPane, #leftPane, #footer {border: 1px solid #606060;}
    </style>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.3/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("dijit.form.ComboBox");
      var map;


      function init() {
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-118.404, 34.054],
          zoom: 11
        });
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="background:#EEEEEE;width:100%;height:100%;">
      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:100px">
        This is the header section
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane" style="width:100px;height:100%">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'">
          Content for pane 1
        </div>
      </div>
      <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:500px;height:700px">
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane" style="width:100px;height:100%;">
        This is the right section
      </div>
      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;width:100%">
        Make a selection from any of these combo boxes:<br/>
        <table>
            <tr>
                <td>
                    <select id="Select1" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select2" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select3" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select4" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select5" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select6" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
            </tr>
            <tr>
                <td>
                    <select id="Select7" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select8" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select9" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select10" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select11" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>            
            </tr>
        </table>
      </div>
    </div>
  </body>
</html>

GeoffreyWest · ‎10-23-2014

This seems like a likely solution, however my footer is taking up half of my page and my header disappears.

body class="claro" onkeydown="if (event.keyCode==dojo.keys.TAB) { if (dijit.byId('dialogLoadMessage').open || dijit.byId('dialogAlertMessage').open) {return event.keyCode!=dojo.keys.TAB;}}">

Make a selection from any of these combo boxes:<br/>

<table>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td></div>

SteveCole · ‎10-23-2014

I see a couple weird HTML issues, namely what seemed to be mis-matched DIV tags. Here's the part that caught my attention:

<body class="claro" onkeydown="if (event.keyCode==dojo.keys.TAB) { if (dijit.byId('dialogLoadMessage').open || dijit.byId('dialogAlertMessage').open) {return event.keyCode!=dojo.keys.TAB;}}">
    <div id="divMainContainer" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height:100%; position: absolute"></div>
        <div id="map" class="map" region="center" dojotype="dijit.layout.ContentPane"></div>
     <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:100px;width:100px"></div></div>

The first thing that's odd is that I believe the div "divMainContainer" should contain everything on your page but it immediately has a closing tag behind it's initial declaration (i.e. the "</div>" appears right away). Try deleting that closing tag and see what happens. You have to closing DIV tags at the end of the declaration for the footer DIV. Also, the table of combo boxes is actually outside of the footer div so the div closing tags need to be moved to the end of the table HTML code. If I shuffle your HTML snippet around, you should end up with something like this:

<body class="claro" onkeydown="if (event.keyCode==dojo.keys.TAB) { if (dijit.byId('dialogLoadMessage').open || dijit.byId('dialogAlertMessage').open) {return event.keyCode!=dojo.keys.TAB;}}">
    <div id="divMainContainer" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height:100%; position: absolute">
        <div id="map" class="map" region="center" dojotype="dijit.layout.ContentPane"></div>
     <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:100px;width:100px">
        Make a selection from any of these combo boxes:<br/>
        <table>
            <tr>
                <td>
                    <select id="Select1" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select2" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select3" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select4" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select5" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
                <td>
                    <select id="Select6" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td>
            </tr>
            <tr>
                <td>
                    <select id="Select7" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true"  style="width: 175px; background-color:Black; font:black;color: white;">
                </td></div></div>

GeoffreyWest · ‎10-23-2014

This is the solution, however my elements are still being moved around on the page when using your format. Should anything be changed in my CSS?

EDIT: The DIV element takes up half of the page and incidentally covers my map.

EndiHariadi · ‎06-02-2021

I use bootstrap elements like this:

    <footer class="text-center text-lg-center">
        <div class="text-center p-3" style="background-color: rgba(15, 23, 36, 1);" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
            <a class="text-white" style="z-index:50;"><span>My footer test</span></a>
        </div>
    </footer>

For me personally, this is enough.