Editing the edit web app template

Anonymous User — Fri, 19 Sep 2014 21:05:10 GMT

Hi,

I downloaded the Esri's Edit web app template for use in AGOL and I'm trying to adjust the height of the table of contents or section of the window that shows the editable features, which originally appears on the left side of the screen. Here is what is looks like now: http://mapservertest.borough.kenai.ak.us/edit-template-master/index.html If you can't access that then see the image at the bottom, I've circled the area of interest.

Below is a snippet from the index.html file. It shows the width parameter as "240px" by default: setPanelContent(content_title , content , "240px")

But where would the height be? Maybe I'm looking in the wrong location. How is the height determined?

var content = domConstruct.create("div",{id:"editorDiv"});

//create the Legend or Editor

var editableLayers = this.appcontent.getEditableLayers(response.itemInfo.itemData.operationalLayers, this.map);

//edit permissions

var editable = true;

var content_title = this.options.i18n.viewer.content_title;

if(esriLang.isDefined(this.options.userPrivileges)){

if(array.indexOf(this.options.userPrivileges, "features:user:edit") === -1){

editable = false;

//change the title to legend

content_title = content_title = this.options.i18n.viewer.legend_title;

}

} else if(editableLayers.length === 0){

//change the title to legend

content_title = content_title = this.options.i18n.viewer.legend_title;

}

this.appcontent.setPanelContent(content_title , content , "240px").then(lang.hitch(this, function(){

this.map.reposition();

this.map.resize();

*Snippet from the CreateContent.js file for more context:

setPanelContent: function( title, content, width){
               var deferred = new Deferred();
                if(this.isMobile){
                   dom.byId("displayButton").innerHTML = title;
                   domConstruct.place(content, this.leftPanel);
                   this.mainWindow.resize();
                   deferred.resolve();
                }else{
                  this.leftPanel.set("content" , content);
                  this.leftPanel.set("style", {width: width});
                  this.mainWindow.resize();
                  deferred.resolve();
                }
      
                 return deferred.promise;

Re: Editing the edit web app template

KellyHutchins — Wed, 24 Sep 2014 18:02:14 GMT

Hi Ben,

Try adding the following rule to the layout.css page. You'll want to update the specified height to the value you want.

.esriTemplatePicker{

height:800px;

}

topic Re: Editing the edit web app template in ArcGIS JavaScript Maps SDK Questions

Editing the edit web app template

Re: Editing the edit web app template