topic Re: CSS for non editables in Attribute Inspector in ArcGIS JavaScript Maps SDK Questions

CSS for non editables in Attribute Inspector

williamcarr — Tue, 03 Feb 2015 20:39:04 GMT

Greetings,

I currently have an app where some of the fields are set as non editable or uses a Map Service for the attribute Inspector. It serves it's purpose, but when seen on a tablet outdoors the colors(Grey text of light grey background) are almost impossible to see. I've tried:

.esriAttributeInspector .atiField {

font-family: "Verdana";

font-size: 1em;

color: #000000;

background: #ffffff;

width: 200px;

text: #000000;

}

.esriAttributeInspector .atiTextAreaField {

font-family: "Verdana";

font-size: 1em;

background: #ffffff;

color: #000000;

width: 196px;

}

and other permutations, but to no avail. Is there another .ati*********** that I need to have for these non editable fields? I couldn't find that specific documentation.

Thanks.

Re: CSS for non editables in Attribute Inspector

SteveCole — Tue, 03 Feb 2015 21:55:48 GMT

Based on ESRI's attribute inspector sample, it looks like that shading is controlled by the Dojo dijitTextBoxDisabled css class.

Re: CSS for non editables in Attribute Inspector

ChrisSergent — Wed, 04 Feb 2015 14:48:46 GMT

I got the text to change to red in just the disabled fields using this css:

.dj_webkit .claro .dijitDisabled input {

color: red;

}

and this will change the background color of the disabled fields to blue:

.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {

background-color:Blue;

background-image: none;

}

Here is my code sample: JS Bin - Collaborative JavaScript Debugging

for this sample:

Attribute Inspector with one editable field | ArcGIS API for JavaScript

Re: CSS for non editables in Attribute Inspector

williamcarr — Wed, 04 Feb 2015 15:45:20 GMT

Thanks, Chris.

Oddly enough, of all the changes that I made for some reason the dijitDisabled didn't display any changes in FireBug.. But it did in chrome!