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
Solved! Go to Solution.
Brandon,
Sure just use this CSS:
.simpleGeocoder .esriGeocoderContainer {
width: 225px;
font-size: 12px;
line-height: 16px;
font-family: verdana,helvetica;
}
Brandon,
Sure just use this CSS:
.simpleGeocoder .esriGeocoderContainer {
width: 225px;
font-size: 12px;
line-height: 16px;
font-family: verdana,helvetica;
}
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
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).
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
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;
}
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
Brandon,
No I really am not using popups for much so I have yet had a need to work with the size.
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
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;
}