Template picker problem

[Anonymous User]

Original User: JKnowles@worcestershire.gov.uk
Original Date: 2011-02-17T06:36:55-0600

Hi

I am having trouble getting the template picker to render in a div with scrollbars, the image spill out of the div and I am having trouble finding the correct css to apply to the dojo/digit before it renders.

I basically cant get the template picker when it is rendered to sit within the editorDiv.

Any ideas anyone ??

See code below and attached image;

mark up code;

<div dojotype="dijit.layout.ContentPane" id="templatePickerPane" onclick="editDivClickGrabXY()" style="width:200px;margin:1px;background-color:white; overflow:auto;">
<div id="editorDiv" style=" overflow:scroll; height:300px; width:150px; "></div>
Or select rotation icon:<br /><br />
<input id="btnRO" onclick="bob(0)" type="button" value="RO" title="Rotate Outlet" />
<input id="btnRG" onclick="bob(1)" type="button" value="RG" title="Rotate Gully" />
<input id="btnRI" onclick="bob(2)" type="button" value="RI" title="Rotate Inlet" /><br /><br />
Edit layer visibilty control:<br /><br />
<div id="editLayerControl" style=""></div>

</div>

javascript code;
var templateLayers = dojo.map(results, function(result) {
return result.layer;
});

var featureLayerInfos = dojo.map(results, function(result) {
return { featureLayer: result.layer };
});

var templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: 'auto',
columns: 4
}, 'editorDiv');
templatePicker.startup();

var settings = {
map: map,
templatePicker: templatePicker,
geometryService: geometryServiceGlobal,
layerInfos: featureLayerInfos
};
//populate editor widget
var params = { settings: settings };
editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();

[Anonymous User]

Original User: jon26

ESRIUK sussed this out for me, it was an ie browser issue, parent div has to be set to position:relative and then the div containing the template picker has to be position:absolute. All divs have to have style for height and width set, see code below

<div id="findDIV" style="width:248px; height:95%; display:none; position:relative; overflow:auto; font-size:small; font-family:Arial; margin-left:4px;">Click on Icon to edit layer:<br /><br />
<%--<div dojotype="dijit.layout.ContentPane" id="templatePickerPane" onclick="editDivClickGrabXY()" style="width:200px;margin:1px;background-color:white;"> --%>
<div id="editorDiv" style="height:299px; width:200px;"></div>
<%--</div>--%>
<div id="Div1" style="height:310px; width:200px;"></div>
<div style="height:60px; width:200px;">Or select rotation icon:<br /><br />
<input id="btnRO" onclick="bob(0)" type="button" value="RO" title="Rotate Outlet" />
<input id="btnRG" onclick="bob(1)" type="button" value="RG" title="Rotate Gully" />
<input id="btnRI" onclick="bob(2)" type="button" value="RI" title="Rotate Inlet" /></div><br /><br />
Edit layer visibilty control:<br /><br />
<div id="editLayerControl" style="height:300px; width:200px;"></div>


</div>

Javascript for t picker

var templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: 'auto',
columns: 2,
style: "overflow:auto; height:299px; width:200px; position:absolute;"
}, 'editorDiv');
templatePicker.startup();