I have all my tools stored in TitlePanes within a ContentPane as a side panel so the users can have more than one set of tools open at a time. I have my geocoder in a titlePane and it looks fine until I start to enter something. The suggestions aren't showing well. You can sort of see them, but mostly there are cut off and the user gets scroll bars to deal with.
It seems like I ought to be able to set a style on the geocoder, but I haven't figured out which style it is. I tried .simpleGeocoder .esriGeocoderResults, which seemed likely, but that didn't fix this. I tried adding a z-index, but that didn't do anything.
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right',splitter:true">
<div id="tp_geocode" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Identify District by Address', closable:false, open:true">
<div id="geocodeDiv"> </div>
</div>
</div>
Don't see that happen with the sample I created (using Chrome, maybe different in other browsers):
You're right, it's OK in Chrome. I"m seeing it in Firefox. Unfortunately I need this to work in multiple browsers.
Internet Explorer is always flimsy with certain widgets. For the first result to be shown right on IE i added some padding both for the main search and the Results.
.simpleGeocoder .esriGeocoder { padding: 5px; } .simpleGeocoder .esriGeocoderResults { position: relative; padding: 5px; }
What version of IE? The State users have IE 8. It doesn't work there. The padding addition helped in all the other browsers.
This one seems to work across all browsers, even IE8:
Titelpane sizes to geocoder results - JSFiddle
(the margin: 1px
is the key here)
(as jsfiddle doesn't support IE8, use this link in IE8: http://fiddle.jshell.net/d27wwL7p/17/show/light/
I had no luck opening the fiddle.jshell.net in my IE 8. It's just empty. It could be something that is getting suppressed. The security group is constantly having to tighten what gets through the firewall.
When I tried that style, it looks like this:
Heiko's suggestion should work across browsers. Its the same css we use to display the geocoder widget on the Classic Viewer template's title bar. If you aren't able to test on IE8 with the jsfiddle perhaps try this url and see if you are able to see the suggestions menu for the geocoder?
Just want to let you know that it works on IE11.
(It is the only IE version that I can test on this computer.)