topic Re: How do I edit the size of the geocoder in web app builder? in Web AppBuilder Custom Widgets Questions

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

BrandonKeinath1 — Sun, 12 Dec 2021 09:41:33 GMT

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;

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

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

RobertScheitlin__GISP — Wed, 06 May 2015 12:49:27 GMT

Brandon,

Sure just use this CSS:

.simpleGeocoder .esriGeocoderContainer {

width: 225px;

font-size: 12px;

line-height: 16px;

font-family: verdana,helvetica;

}

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

BrandonKeinath1 — Wed, 06 May 2015 12:58:24 GMT

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

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

BrandonKeinath1 — Wed, 06 May 2015 12:59:37 GMT

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

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

RobertScheitlin__GISP — Wed, 06 May 2015 13:07:54 GMT

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).

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

RobertScheitlin__GISP — Wed, 06 May 2015 14:27:19 GMT

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;

}

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

BrandonKeinath1 — Wed, 06 May 2015 14:45:56 GMT

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

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

RobertScheitlin__GISP — Wed, 06 May 2015 15:24:30 GMT

Brandon,

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

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

RickeyFight — Wed, 06 May 2015 15:46:16 GMT

Brandon,

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.

Have you seen this Popup Size for Edit widget

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

BrandonKeinath1 — Wed, 06 May 2015 15:50:21 GMT

Hi Rickey,

I hadn't. Thanks for sharing. I'll add some comments over on that discussion.

Brandon

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

BrandonKeinath1 — Mon, 18 May 2015 20:43:58 GMT

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?

Thanks,

Brandon

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

RobertScheitlin__GISP — Mon, 18 May 2015 20:53:31 GMT

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;

}

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

BrandonKeinath1 — Tue, 19 May 2015 12:30:02 GMT

Hi Robert,

As usual that did the trick. Thanks for the help!

Brandon

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

BrandonKeinath1 — Wed, 29 Jul 2015 19:52:45 GMT

Hi Robert,

It's been a while on this topic and I'm finally getting to trying it. But I'm having trouble finding where I put the code.

Thanks,

Brandon

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

RobertScheitlin__GISP — Wed, 29 Jul 2015 20:14:54 GMT

Brandon,

Just add it to the widgets style.css.

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

BrandonKeinath1 — Wed, 29 Jul 2015 21:22:45 GMT

HI Robert,

Sorry for the silly question. I actually did implement this fix for my geocoder just like you said but then the question came up for pop-ups in a meeting today and I got excited, and confused it seems, and posted to the wrong thread. Thanks for the help and sorry for the trouble.

Brandon