nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Attribute table styling--where to do it? MXML attribute widget, xml, or CSS?

DavidBoiano

Hello,

I am trying to match the design of an application I created using the Flex API, not the Viewer. I have attached an image with each application side by side, with the one I am trying to mirror on the left. Specifically, the changes I still need to make are:

In the header controller:
--How to change the color of the background of the geocoder only, not the entire header
--How to change the "Enter address..." text in the geocoder

In the attribute table:
--How to make the background color white and the text black (more basic looking)

[ATTACH=CONFIG]26705[/ATTACH]

I am pretty sure I can figure out how to make these changes--I just need some direction on where to look!

Thanks in advance for your help!

David

flex_apps_comparison.png

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

David,

Add an alpha attribute to the promptDisplay:

<s:Label id="promptDisplay" color="0x000000" alpha="1"              includeIn="normalWithPrompt,disabledWithPrompt"              includeInLayout="false"              maxDisplayedLines="1"              mouseChildren="false"              mouseEnabled="false"              verticalAlign="middle"/>

All comments

DavidBoiano

Awesome. THANK YOU!

RobertScheitlin__GISP

David,

Add an alpha attribute to the promptDisplay:

<s:Label id="promptDisplay" color="0x000000" alpha="1"              includeIn="normalWithPrompt,disabledWithPrompt"              includeInLayout="false"              maxDisplayedLines="1"              mouseChildren="false"              mouseEnabled="false"              verticalAlign="middle"/>

DavidBoiano

Robert,

I have been requested to change the color of the search prompt that automatically displays in the Geocoder. Would this be done in the skin as well? Looking through the code I have located

 <s:RichEditableText id="textDisplay"

and the

 <s:Label id="promptDisplay"

and followed them through the actionscript code. I don't see anywhere in the mxml or AS where the color is set. Is this possible to change? I was able to successfully change the prompt text that is displayed in the Header Controller widget in the xml file and the background was changed to white. However, the text is gray and now hard to read.

Thanks,

David

RobertScheitlin__GISP

David,

It is this line of code that colors the background of the geocoder to the contentBackgroundColor:

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [ "bgFill" ];

Change it to:

static private const contentFill:Array = [];

DavidBoiano

Robert,

My mistake. I have that downloaded, also. I have located the "bgfill" SolidColor tag within the GeocoderSkin.mxml. It is default set to white, but my application is still showing up blue like the style set in the config file. I am referencing the skin-class in the default.css file as

esri|Geocoder
{
 skin-class: ClassReference("com.esri.viewer.skins.MyGeocoderSkin");
}

Is this not where I should be referencing the skin?

Or is this not the correct part of the skin to make the background of the geocoder white?

 <s:Rect id="background"
   left="1" right="1" top="1" bottom="1">
  <s:fill>
   <s:SolidColor id="bgFill" color="0xFFFFFF"/>
  </s:fill>
 </s:Rect>

RobertScheitlin__GISP

David,

That is because you are looking at the viewer's skins and I said the API Skins (two different things). You need to download the Flex API and in that download you will find the API skins.

DavidBoiano

Hi Robert,

Thanks for your reply. I am having trouble locating the GeocoderSkin.mxml. I am running Flex 3.3 and looking in the Skins package. I found https://developers.arcgis.com/en/flex/api-reference/ in the API reference stating it was implemented in 3.2--but where?

Thanks!

David

PS This is what I see exactly in the package explorer:
[ATTACH=CONFIG]26709[/ATTACH]

what_i_see.png

RobertScheitlin__GISP

David

You have to make change to the Flex API's skin for the Geocoder. GeoCoderSkin.mxml
The prompt is controlled by the searchprompt label tag in the HeaderControllerWidget.xml (not in the XML by default). http://resources.arcgis.com/en/help/flex-viewer/concepts/index.html#/Header_Controller_widget_tags/01m30000000n000000/
You have to make change to the Flex API's skin for the AttributeTable. AttributeTableSkin.mxml

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.