Geocoder in titlePane gets cut off - need style assistance

2484
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
MirceaMaierean
New Contributor III

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.

0 Kudos
SteveCole
Frequent Contributor

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

.claro .esriGeocoder {
  z-index: 800 !important;
}
0 Kudos
TracySchloss
Frequent Contributor

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. 

0 Kudos
SteveCole
Frequent Contributor

How about .esriGeocoderResults ?

0 Kudos
TracySchloss
Frequent Contributor

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. 

0 Kudos
HeikoHeijenga
Esri Contributor

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;
}
SteveCole
Frequent Contributor

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!

0 Kudos
TracySchloss
Frequent Contributor

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. 

0 Kudos
TracySchloss
Frequent Contributor

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.

geocoderStyle2.png

0 Kudos