Community
Select to view content in your preferred language

Change Drop Down Title pane

3342
11
Jump to solution
05-12-2014 10:00 AM
AlexGole1
by
Emerging Contributor
‎05-12-2014 10:00 AM
Hi all,
I am trying to create a nice toolbar using html5 and css.
Everything looks like I want it to look but one thing. For each drop down icons, I had to use a dijit/titlepane container to fit my text/checkboxes into a box with a white canvas underneath. The only problem is that I have two drop downs: one from the drop down icon/menu, the second from the title pane. I tried to use two content panes but the result is a transparent box, which I do not want. Any idea how to fix this?
Thank you,
Alex[ATTACH=CONFIG]33757[/ATTACH]
[ATTACH=CONFIG]33758[/ATTACH]
Preview file
16 KB
Preview file
8 KB
0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable
‎05-13-2014 11:00 AM
Original User: sarahclark

I have been using 'Menu' and 'MenuItem' within the 'DropDownButton' (http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html). The background is automatically white. Below is an example of adding a basemap gallery using the drop down on a toolbar-- hopefully that could serve as a template for your other tools, let me know if that helps.

HTML:
<!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>TEST</title>    <!-- CSS -->   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>    html, body {     height: 100%;     width: 100%;     margin: 0px;     overflow: hidden;     font-family: Helvetica, Sans-Serif;    }    #navToolbar {     position: absolute;     padding: 0px;     margin: 0px;     top: 0px;     left: 0px;     right: 0px;    }    #map {     padding: 0px;    }   </style>    <!-- Code -->   <script src="http://js.arcgis.com/3.9/"></script>   <script>    require(["esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer",     "dijit/registry", "dojo/parser", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem",     "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Toolbar", "esri/dijit/Print","dojo/domReady!"],     function(Map, BasemapGallery, Basemap, BasemapLayer, registry, parser, DropDownButton,      DropDownMenu, MenuItem, ContentPane, BorderContainer, Toolbar) {      parser.parse();      var map = new Map("map", {      basemap : "topo",      center : [-98, 39],      zoom : 4     });      // Create custom list of basemaps for the gallery     basemapsList = [];     var esriAerial = new Basemap({      layers : [new BasemapLayer({       url : "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"      })],      title : "ESRI Aerial",      thumbnailUrl : "images/world_imagery.png"     });     basemapsList.push(esriAerial);      // Add the basemap gallery     var basemapGallery = new BasemapGallery({      showArcGISBasemaps : false,      basemaps : basemapsList,      map : map     });     basemapGallery.startup();     // Add the basemap gallery in drop down menu on toolbar     if (basemapGallery.loaded) {      createBasemapGallery();     };      function createBasemapGallery() {      for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {         registry.byId('basemapMenu').addChild(new MenuItem({          label : basemapGallery.basemaps.title,          onClick : function() {           basemapGallery.select(basemapGallery.basemaps.id);          }         }));        }(i));      }     }     });   </script>   </head>   <body class="claro infinity">   <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false,liveSplitters:false" style="width:100%; height:100%;">    <div id="navToolbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">     <div data-dojo-type="dijit/Toolbar">      <div label="Basemaps"  data-dojo-type="dijit/form/DropDownButton">       <div data-dojo-type="dijit/Menu" id="basemapMenu">        <!--The menu items are dynamically created using the basemap gallery layers-->       </div>      </div>     </div>    </div>    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>   </div>   </body> </html>

View solution in original post

0 Kudos
11 Replies
by Anonymous User
Not applicable
‎05-13-2014 08:07 AM
Original User: sarahclark

Hi Alex - I've done some of this too, maybe can help. I don't think I quite understand yet -- are you using dijit/DropDownMenu in a dijit/Toolbar? And then within that drop down menu is a title pane? I feel like adding a <div class="white"> to change the color of the content pane would work instead of using the title pane, but I'm just brainstorming.
0 Kudos
AlexGole1
by
Emerging Contributor
‎05-13-2014 08:38 AM
Hi Alex - I've done some of this too, maybe can help. I don't think I quite understand yet -- are you using dijit/DropDownMenu in a dijit/Toolbar? And then within that drop down menu is a title pane? I feel like adding a <div class="white"> to change the color of the content pane would work instead of using the title pane, but I'm just brainstorming.


Yes. I am using dijit/DropDownMenu in a dijit/Toolbar and added a title pane in the drop down menu in order to get a white canvas to display my different map elements (such as basemap gallery, bookmarks, layers...). I will try to add the <div class="white"> and see if that works.
Thank you for your help!
Alex
0 Kudos
AlexGole1
by
Emerging Contributor
‎05-13-2014 09:37 AM
Yes. I am using dijit/DropDownMenu in a dijit/Toolbar and added a title pane in the drop down menu in order to get a white canvas to display my different map elements (such as basemap gallery, bookmarks, layers...). I will try to add the <div class="white"> and see if that works.
Thank you for your help!
Alex

It seems like the <div class="white"> messed up my toolbar and the dropdown menu is still transparent. Attached is an screen shot of how it looks when I added the <div class="white">, the second image it how it is supposed to look. Where


 <section data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'bookmarks', showLabel:false, style:'float:left'">
               <span>Bookmarks</span>
                  <section class="white" data-dojo-type="dijit/layout/ContentPane" style="width:auto; !important; height:auto !important; overflow:auto;">
                     <section id="bookmarks">
                     </section>
                  </section>
               </section>


Where did I make a mistake?

[ATTACH=CONFIG]33783[/ATTACH][ATTACH=CONFIG]33784[/ATTACH]
Preview file
501 KB
Preview file
512 KB
0 Kudos
by Anonymous User
Not applicable
‎05-13-2014 11:00 AM
Original User: sarahclark

I have been using 'Menu' and 'MenuItem' within the 'DropDownButton' (http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html). The background is automatically white. Below is an example of adding a basemap gallery using the drop down on a toolbar-- hopefully that could serve as a template for your other tools, let me know if that helps.

HTML:
<!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>TEST</title>    <!-- CSS -->   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>    html, body {     height: 100%;     width: 100%;     margin: 0px;     overflow: hidden;     font-family: Helvetica, Sans-Serif;    }    #navToolbar {     position: absolute;     padding: 0px;     margin: 0px;     top: 0px;     left: 0px;     right: 0px;    }    #map {     padding: 0px;    }   </style>    <!-- Code -->   <script src="http://js.arcgis.com/3.9/"></script>   <script>    require(["esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer",     "dijit/registry", "dojo/parser", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem",     "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Toolbar", "esri/dijit/Print","dojo/domReady!"],     function(Map, BasemapGallery, Basemap, BasemapLayer, registry, parser, DropDownButton,      DropDownMenu, MenuItem, ContentPane, BorderContainer, Toolbar) {      parser.parse();      var map = new Map("map", {      basemap : "topo",      center : [-98, 39],      zoom : 4     });      // Create custom list of basemaps for the gallery     basemapsList = [];     var esriAerial = new Basemap({      layers : [new BasemapLayer({       url : "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"      })],      title : "ESRI Aerial",      thumbnailUrl : "images/world_imagery.png"     });     basemapsList.push(esriAerial);      // Add the basemap gallery     var basemapGallery = new BasemapGallery({      showArcGISBasemaps : false,      basemaps : basemapsList,      map : map     });     basemapGallery.startup();     // Add the basemap gallery in drop down menu on toolbar     if (basemapGallery.loaded) {      createBasemapGallery();     };      function createBasemapGallery() {      for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {         registry.byId('basemapMenu').addChild(new MenuItem({          label : basemapGallery.basemaps.title,          onClick : function() {           basemapGallery.select(basemapGallery.basemaps.id);          }         }));        }(i));      }     }     });   </script>   </head>   <body class="claro infinity">   <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false,liveSplitters:false" style="width:100%; height:100%;">    <div id="navToolbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">     <div data-dojo-type="dijit/Toolbar">      <div label="Basemaps"  data-dojo-type="dijit/form/DropDownButton">       <div data-dojo-type="dijit/Menu" id="basemapMenu">        <!--The menu items are dynamically created using the basemap gallery layers-->       </div>      </div>     </div>    </div>    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>   </div>   </body> </html>
0 Kudos
AlexGole1
by
Emerging Contributor
‎05-13-2014 11:19 AM
I have been using 'Menu' and 'MenuItem' within the 'DropDownButton' (http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html). The background is automatically white. Below is an example of adding a basemap gallery using the drop down on a toolbar-- hopefully that could serve as a template for your other tools, let me know if that helps.

HTML:
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>TEST</title>

  <!-- CSS -->
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <style>
   html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    overflow: hidden;
    font-family: Helvetica, Sans-Serif;
   }
   #navToolbar {
    position: absolute;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
   }
   #map {
    padding: 0px;
   }
  </style>

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
   require(["esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", 
   "dijit/registry", "dojo/parser", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem", 
   "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Toolbar", "esri/dijit/Print","dojo/domReady!"], 
   function(Map, BasemapGallery, Basemap, BasemapLayer, registry, parser, DropDownButton, 
    DropDownMenu, MenuItem, ContentPane, BorderContainer, Toolbar) {

    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Create custom list of basemaps for the gallery
    basemapsList = [];
    var esriAerial = new Basemap({
     layers : [new BasemapLayer({
      url : "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
     })],
     title : "ESRI Aerial",
     thumbnailUrl : "images/world_imagery.png"
    });
    basemapsList.push(esriAerial);

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : false,
     basemaps : basemapsList,
     map : map
    });
    basemapGallery.startup();
    // Add the basemap gallery in drop down menu on toolbar
    if (basemapGallery.loaded) {
     createBasemapGallery();
    };

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>

 </head>

 <body class="claro infinity">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false,liveSplitters:false" style="width:100%; height:100%;">
   <div id="navToolbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
    <div data-dojo-type="dijit/Toolbar">
     <div label="Basemaps"  data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu">
       <!--The menu items are dynamically created using the basemap gallery layers-->
      </div>
     </div>
    </div>
   </div>
   <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>

 </body>
</html>


I am impressed. I have been looking for this for a long time. Thank you Sarah!
0 Kudos
by Anonymous User
Not applicable
‎05-13-2014 11:26 AM
Original User: sarahclark

Excellent, glad to help!
0 Kudos
AlexGole1
by
Emerging Contributor
‎05-13-2014 12:09 PM
Excellent, glad to help!


Ok. I am not sure why my basemap dropdown button is not working and throwing off my map. Any idea? Here is my code http://jsbin.com/wuxon/1/edit. Thanks for all your help again!
Alex
0 Kudos
by Anonymous User
Not applicable
‎05-13-2014 03:39 PM
Original User: sarahclark

Man I just went down a rabbit hole with this one...I'm pretty much a newb as well so sorry I can't be of more help. I had to strip down your code a bunch to get this to work so the skeleton is below. However, I did revisit an issue with the basemapGallery dijit that I encountered before and finally got it resolved. If 'showArcGISBasemaps:true' is set then it's important to use the basemaps.on("load") syntax. FYI if it's ever set to false this will NEVER fire because load only fires for fetching ArcGIS.com basemaps (which is the issue I encountered before building a custom list). Anywho...I tried to mimic your set-up below so you could try to add to it from a working base. 


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>TEST</title>
  <!-- CSS -->
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>

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

  <script>
   require(["esri/map", "dojo/parser", "dojo/on", "esri/dijit/BasemapGallery", 
   "dijit/registry", "dijit/MenuItem", "dijit/Toolbar", "dijit/form/Button", 
   "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/layout/BorderContainer", 
   "dijit/layout/ContentPane", "dijit/layout/AccordionContainer"], 
   function(Map, parser, on, BasemapGallery, registry, MenuItem) {
    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : true,
     map : map,

    });
    basemapGallery.startup();

    if (basemapGallery.showArcGISBasemaps) {
     basemapGallery.on("load", function() {
      console.log('base');
      createBasemapGallery();
     });
    } else {
     createBasemapGallery();
    }
    // Add the basemap gallery in drop down menu on toolbar

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        console.log(basemapGallery.basemaps.title);
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>
 </head>

 <!--ESRI's layout-->

 <body class="claro">
  <!--Border Container settings-->
  <section data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:true" style="width: 100%; height: 100%; padding-top:0px;">
   <!--Border Container settings-->
   <!-- Tags end on line afterwards to eliminate any whitespace -->
   <!--This is the header of the application-->
   <section data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

    <h1>Fire Plan Web Mapping Application</h1>
   </section>
   <section data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:true">
    <section data-dojo-type="dijit/layout/AccordionContainer">
     <section data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
      <section id="tocsection">
       TOC Placeholder
      </section>
     </section>
    </section>
   </section>
   <section id="map" class="map" data-dojo-type="dijit/layout/ContentPane" region="center" data-dojo-props="region:'center'">
    <section id="fancy" data-dojo-type="dijit/Toolbar" style="background-color:black; height:35px;">

     <!--Additional widgets go below there-->
     <div label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu"></div>
     </div>

    </section>
   </section>
  </section>
 </body>
</html>
0 Kudos
AlexGole1
by
Emerging Contributor
‎05-13-2014 03:45 PM
Man I just went down a rabbit hole with this one...I'm pretty much a newb as well so sorry I can't be of more help. I had to strip down your code a bunch to get this to work so the skeleton is below. However, I did revisit an issue with the basemapGallery dijit that I encountered before and finally got it resolved. If 'showArcGISBasemaps:true' is set then it's important to use the basemaps.on("load") syntax. FYI if it's ever set to false this will NEVER fire because load only fires for fetching ArcGIS.com basemaps (which is the issue I encountered before building a custom list). Anywho...I tried to mimic your set-up below so you could try to add to it from a working base. 


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>TEST</title>
  <!-- CSS -->
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

  <!-- Code -->
  <script src="http://js.arcgis.com/3.9/"></script>

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

  <script>
   require(["esri/map", "dojo/parser", "dojo/on", "esri/dijit/BasemapGallery", 
   "dijit/registry", "dijit/MenuItem", "dijit/Toolbar", "dijit/form/Button", 
   "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/layout/BorderContainer", 
   "dijit/layout/ContentPane", "dijit/layout/AccordionContainer"], 
   function(Map, parser, on, BasemapGallery, registry, MenuItem) {
    parser.parse();

    var map = new Map("map", {
     basemap : "topo",
     center : [-98, 39],
     zoom : 4
    });

    // Add the basemap gallery
    var basemapGallery = new BasemapGallery({
     showArcGISBasemaps : true,
     map : map,

    });
    basemapGallery.startup();

    if (basemapGallery.showArcGISBasemaps) {
     basemapGallery.on("load", function() {
      console.log('base');
      createBasemapGallery();
     });
    } else {
     createBasemapGallery();
    }
    // Add the basemap gallery in drop down menu on toolbar

    function createBasemapGallery() {
     for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
        console.log(basemapGallery.basemaps.title);
        registry.byId('basemapMenu').addChild(new MenuItem({
         label : basemapGallery.basemaps.title,
         onClick : function() {
          basemapGallery.select(basemapGallery.basemaps.id);
         }
        }));
       }(i));
     }
    }

   });
  </script>
 </head>

 <!--ESRI's layout-->

 <body class="claro">
  <!--Border Container settings-->
  <section data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:true" style="width: 100%; height: 100%; padding-top:0px;">
   <!--Border Container settings-->
   <!-- Tags end on line afterwards to eliminate any whitespace -->
   <!--This is the header of the application-->
   <section data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

    <h1>Fire Plan Web Mapping Application</h1>
   </section>
   <section data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:true">
    <section data-dojo-type="dijit/layout/AccordionContainer">
     <section data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
      <section id="tocsection">
       TOC Placeholder
      </section>
     </section>
    </section>
   </section>
   <section id="map" class="map" data-dojo-type="dijit/layout/ContentPane" region="center" data-dojo-props="region:'center'">
    <section id="fancy" data-dojo-type="dijit/Toolbar" style="background-color:black; height:35px;">

     <!--Additional widgets go below there-->
     <div label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
      <div data-dojo-type="dijit/Menu" id="basemapMenu"></div>
     </div>

    </section>
   </section>
  </section>
 </body>
</html>

Sorry Sarah. As you noticed I am a newb as well :-). You are doing a much better job at this than I am. I really appreciate your effort and  help on this. I am trying out your code now.
Thanks again,
Alex
0 Kudos