How do I edit the size of the geocoder in web app builder?

5846
15
Jump to solution
05-05-2015 06:35 PM
BrandonKeinath1
Occasional Contributor III

I'm trying to modify the size of the geocoder in a web app builder application.  I'm able to modify the size of the drop down portion by editing the second line of the style.css.  This makes the "Search in" portion bigger.

.jimu-widget-geocoder{
  width: 500px !important;

Geocodersize.JPG

I'd like to modify the size of the geocoder upper portion so that our addresses and customer names fit.  Any thoughts would be helpful.


Thanks,


Brandon

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Brandon,

  Sure just use this CSS:

.simpleGeocoder .esriGeocoderContainer {

    width: 225px;

    font-size: 12px;

    line-height: 16px;

    font-family: verdana,helvetica;

}

View solution in original post

15 Replies
RobertScheitlin__GISP
MVP Emeritus

Brandon,

  Sure just use this CSS:

.simpleGeocoder .esriGeocoderContainer {

    width: 225px;

    font-size: 12px;

    line-height: 16px;

    font-family: verdana,helvetica;

}

BrandonKeinath1
Occasional Contributor III

That's perfect.  Thank you!  I tried looking for some reference docs on properties of the geocoder and didn't find anything that seemed right.  Do you know of any or is this something you've just picked up over time?

Thanks again,


Brandon

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Brandon,

   When I want to work with an element in JS and see the all the css rules for that element I just right click the element in my browser and choose inspect element and then I look at all the css rules applied to that element in the Rules tab (in Firefox, but all browsers has similar).

BrandonKeinath1
Occasional Contributor III

On another note: Could this same concept  be applied to pop-up containers?  There are some questions out on geonet, some of them mine, on editing the default pop-up window size.

Thanks,


Brandon

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Brandon,

  When you try to define css size for the popup there is code that will overwrite that css. So the only way you can change it using css is to add the !important (which is a viable option but is something I really cringe to use).

.esriPopup .sizer{

  width: 470px !important;

}

BrandonKeinath1
Occasional Contributor III

Thanks Robert,

I'm very new to CSS but after reading your reply, and https://css-tricks.com/when-using-important-is-the-right-choice/ , I can see why the "!important" might cause some consternation.  I'm interested not only in accomplishing the goal but also learning how to do something better.  Is there a method that would allow me to change the size that doesn't make you cringe?  I can also add this discussion into the other places if that is more appropriate.

Thanks,


Brandon

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Brandon,

   No I really am not using popups for much so I have yet had a need to work with the size.

0 Kudos
BrandonKeinath1
Occasional Contributor III

Hi Robert,

I'm having some trouble getting my placeholder text to fit.  It seems to be set to the same size as the initial geocoder size.  I tried using inspect element but I'm not understanding enough of what I'm seeing to make the correct change.  Any thoughts?

Geocodersize_placeholdertext.JPG

Thanks,


Brandon

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Brandon,

Try:

.simpleGeocoder .esriGeocoder input {

  outline: 0;

  display: block;

  border: 0;

  border-collapse: collapse;

  vertical-align: middle;

  font-size: 12px;

  line-height: 16px;

  margin: 0;

  padding: 6px 0;

  float: left;

  color: #444;

  background: none;

  margin: 0 6px;

  width: 290px;

}