topic Re: Geocoder in titlePane gets cut off - need style assistance in ArcGIS JavaScript Maps SDK Questions

Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Sat, 11 Dec 2021 16:54:22 GMT

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>

Re: Geocoder in titlePane gets cut off - need style assistance

MirceaMaierean — Tue, 09 Dec 2014 23:18:38 GMT

Why not use accordion panes instead of the title panes?

As for the Geocoder div if its set in a small title pane that what it does unless you set the CSS position to absolute then it should get that suggestions on top of the title pane.

Re: Geocoder in titlePane gets cut off - need style assistance

SteveCole — Sat, 11 Dec 2021 16:54:24 GMT

Try messing with this .css class tag (assuming you're using the Claro Dojo style):

.claro .esriGeocoder {
  z-index: 800 !important;
}

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 17:11:38 GMT

There are instances where the user benefits from having more than one pane open at a time. Rather than go with a mix accordion and title, I just always use TitlePanes.

I tried the style change, it didn't help. I feel like that's where the change needs to happen, I just haven't discovered which style I need to set.

Re: Geocoder in titlePane gets cut off - need style assistance

SteveCole — Wed, 10 Dec 2014 17:20:07 GMT

How about .esriGeocoderResults ?

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 17:25:54 GMT

Nope, that was one I tried before I even posted the question. I'm wondering if I can use a dojo/query to change the height of the titlePane, assuming that 'suggest' is something that I can listen for.

Re: Geocoder in titlePane gets cut off - need style assistance

HeikoHeijenga — Sat, 11 Dec 2021 16:54:27 GMT

Playing around with the CSS of the geocoder I came to a solution that might work for you, see Titelpane sizes to geocoder results - JSFiddle

Key is to set:

.simpleGeocoder .esriGeocoderResults {
    position: relative;
}

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 18:05:03 GMT

That's closer, but now it's pushed the top choice all the way over to the right, so that all you see is part of the first address number.

Re: Geocoder in titlePane gets cut off - need style assistance

SteveCole — Wed, 10 Dec 2014 18:05:09 GMT

Bummer. You're a pretty seasoned veteran of the JS API so I'm not surprised that you already tried my suggestions. Ya never know, though!

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 18:08:34 GMT

I'm always open to suggestions, especially when it comes to styling. Most of the time it's the one combination you haven't tried yet that is the answer.

Re: Geocoder in titlePane gets cut off - need style assistance

HeikoHeijenga — Wed, 10 Dec 2014 18:13:10 GMT

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

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 18:19:24 GMT

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

Re: Geocoder in titlePane gets cut off - need style assistance

HeikoHeijenga — Wed, 10 Dec 2014 18:26:47 GMT

Try Titelpane sizes to geocoder results - JSFiddle

Re: Geocoder in titlePane gets cut off - need style assistance

MirceaMaierean — Sat, 11 Dec 2021 16:54:30 GMT

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;
}

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Wed, 10 Dec 2014 19:15:22 GMT

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

Re: Geocoder in titlePane gets cut off - need style assistance

HeikoHeijenga — Wed, 10 Dec 2014 20:29:22 GMT

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/

Re: Geocoder in titlePane gets cut off - need style assistance

TracySchloss — Thu, 11 Dec 2014 14:16:41 GMT

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:

Re: Geocoder in titlePane gets cut off - need style assistance

YungKaiChin — Wed, 17 Dec 2014 00:14:28 GMT

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

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

Re: Geocoder in titlePane gets cut off - need style assistance

KellyHutchins — Wed, 17 Dec 2014 01:27:01 GMT

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