Geocoder in titlePane gets cut off - need style assistance

1583
18
12-09-2014 02:40 PM
TracySchloss
Frequent Contributor

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.

geocoderCrop.png

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>

Tags (3)
0 Kudos
18 Replies
HeikoHeijenga
Esri Contributor

Don't see that happen with the sample I created (using Chrome, maybe different in other browsers):

Titelpane_sizes_to_geocoder_results_-_JSFiddle.png

0 Kudos
TracySchloss
Frequent Contributor

You're right, it's OK in Chrome.   I"m seeing it in Firefox.  Unfortunately I need this to work in multiple browsers. 

0 Kudos
HeikoHeijenga
Esri Contributor
MirceaMaierean
New Contributor III

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;

}

TracySchloss
Frequent Contributor

What version of IE?  The State users have IE 8.  It doesn't work there.  The padding addition helped in all the other browsers. 

0 Kudos
HeikoHeijenga
Esri Contributor

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/

TracySchloss
Frequent Contributor

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:

geocodeStyle3.png

0 Kudos
KellyHutchins
Esri Frequent Contributor

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?

http://www.arcgis.com/apps/OnePane/basicviewer/index.html

0 Kudos
YungKaiChin
Occasional Contributor

Just want to let you know that it works on IE11.

(It is the only IE version that I can test on this computer.)

0 Kudos