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; } } }

Pop-Up 2.3.1 Text Color Change

TomLucky

I am having an issue with the new 2.3.1 pop-up text changing color from white to black after a hyperlink is clicked. I can query features without any problems with the color until I click the hyperlink in my description section. The hyperlink works correctly, however after opening the hyperlink, all the pop-up descriptions have a text color of black instead of white. Only the text in the description is black which makes it difficult to read against the dark pop-up background. The title, "Zoom To" link, and even the hyperlink in my description remain white. I am using the unmodified 2.3.1 FlexViewer. Below is my pop-up configuration.

<?xml version="1.0" ?>
<configuration>
    <title>{Tax_Parcel.CAMA_PIN}</title>
 <description>
     <![CDATA[<b>Address:  </b>{TAX2010.Address}<b><br>Owner:  </b>{TAX2010.owner}<b><br>Co-Owner:  </b>{TAX2010.co_owner}<b><br>Tax District:  </b>{TAX2010.tax_district}<br><a href='http://indekalb/departments/taxcommissioner/Display.asp?parcel={Tax_Parcel.CAMA_PIN}'><b>Property Tax Link</b></a>]]>
 </description>
</configuration>

<!--
    Pop-up configuration file for:
    http://gis-image-srv1/ArcGIS/rest/services/Parcels/MapServer/26
-->

Any suggestions?

Thanks,

Tom

Find more posts tagged with

Accepted answers

All comments

AlexFriant

This is for people who can't access the code to use the code solution provided in the above posts.

A low tech solution is to insert the <font> tag directly into the description. If you include font color and font face, then the font tag will over ride this bug.

For example:
<![CDATA[<a href='{URL}'><font color="#007FFF" face="arial">Live website data</font></a>]]>

If you use that then even if you click the link, the pop windows you open afterward will all have the same font & color as the original. Modify colors & faces to suit your requirements.

JoeSimpson

Robert,

Thank you so much for posting the PopUprendererSkin, this is great! Being very new at working with the source code in Flash Builder, is there an easy way to left-align my fields within the popup window?

Thank you,
Joe

RobertScheitlin__GISP

Eric,

Just to test if the change is working you would run or debug the Flex Viewer app. Then once satisfied export a release build so that you can copy the bin-release files over to your production web server.

EricVenden

Paul,

Yes it is best to stay up to date as Version 2.3.1 fixed some big issues esri had.

So to get the fix in your FlexViewer and have it apply to all your popups you nee to create a com.esri.ags.skins package by right clciking on the src folder in Flash Builder and choosing new package. Then just paste the attached mxml file in the zip and run the flexviewer app.

Robert,
For this fix...when you say run the app - do you mean run it and then export to release?
Thanks
Eric V
Gurnee, IL

PaulMcBride

Robert,
Thanks for the help! It fixed my issue perfectly.

Paul

philippschnetzer

Robert,

Forgot to mention that I also modified the PopUpMediaBrowser - but only to remove the border inside the popup. The only changes I made to the PopUpRenderer are the sizes...

Thanks

skins.zip

RobertScheitlin__GISP

Philipp ,

Can you post your custom PopUpRendererSkin?

philippschnetzer

Robert,

I am sure the skin is applied - I downloaded the API, modified the skin, copied it into com.esri.viewer.skins in the src folder and then added this to my default.css to make my modified skin the default for all popups:

esri|PopUpRenderer
{
 skinClass:ClassReference('com.esri.viewer.skins.PopUpRendererSkin');
}

The behaviour I am seeing does not seem to have a conclusive pattern - 'usually' if I simply click inside a popup window (just anywhere - not necessarily a link or anything clickable) and then close it and open another popup it will have changed the font type, size and colour.

I have decided to show all the desired fields using the <description> tags rather than the <fields> tag because it offers more flexibility in terms of hyperlinks and so on....and its this <description> html text that loses its formatting....here's a sample in case something pops out at you:

<description>
     <![CDATA[<b>Community:  <FONT COLOR="#4D0000"><i>{COMMUNITY}</i></FONT><br>Unit #'s:  <FONT COLOR="#4D0000"><i>{Unit_NOs}</i></FONT><br>Total Units:  <FONT COLOR="#4D0000"><i>{Total_Unit}</i></FONT><br>Comments:  <FONT COLOR="#4D0000"><i>{COMMENTS}</i></FONT><br></b>]]>   
 </description>

In the above case for my civic popup if I click in the popup (usually) the font decreases in size and the font type changes as well (once I open up a new popup) - but the colour stays the same (black for field names and reddish for the feature attributes). Sorry for the long winded explanation. Your time is seriously much appreciated - phenomenal.

RobertScheitlin__GISP

Phillip,

Are you sure your skin is getting applied?

RobertScheitlin__GISP

Paul,

Yes it is best to stay up to date as Version 2.3.1 fixed some big issues esri had.

So to get the fix in your FlexViewer and have it apply to all your popups you nee to create a com.esri.ags.skins package by right clciking on the src folder in Flash Builder and choosing new package. Then just paste the attached mxml file in the zip and run the flexviewer app.

PopUpRendererSkin.zip

philippschnetzer

Robert,

The fix you posted doesn't seem to work for me. I'm still having the issue of text colour changes and also font type and size changes. Again, this only happens for the html code written in the <description> tags.

PaulMcBride

Robert,

Yes I am using the source code. Would it be better for me to migrate to flexviewer 2.3.1 from 2.3 while I am doing these sorts of changes?

Thanks again!

TomLucky

Robert,

Thanks for tracking down this bug. Since I am not compiling my own code, I guess I will have to wait until this is fixed in the next release. I also want to say thanks for all the work you do on this message board. I would not have made as much progress with my Flex site without your assistance.

Regards,

Tom

RobertScheitlin__GISP

Paul,

The fix is only for people using the source code, so do you fall in that category?

PaulMcBride

Robert, thank for the help you have provided so far, but I do not have a custom popuprendererskin how would you recommend proceeding with the fix?

Thanks

RobertScheitlin__GISP

Phillip,

In your case the fix will be simple then. In your custom PopUpRendererSkin.mxml just find this piece of code and update it with the commented fix.

     if (popUpInfo.description)
     {
      htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);
      if (htmlText)
      {
       cleanAndSetHtmlText(descriptionText, htmlText);
       vGroup.addElement(descriptionText);
      }
//Fix for the 2.3.x popup text color bug RJS
      descriptionText.styleSheet = textStyleSheet;
     }

philippschnetzer

Robert,

Yes, please post your fix. I am currently using a modified popup renderer so it should be easy enough for me to integrate your fix. Thanks a lot!

RobertScheitlin__GISP

Guys,

I found the fix but it involves extending the PopUpRendererSkin from the API and is not for the novice. Let me know if you are really ready to tackle this your self and I will post the fixed PopUpRendererSkin.mxml.

philippschnetzer

Same here - except for me the colour stays the same but the font type actually changes! This only happens after a link is clicked in the popup and then another popup is invoked.

PaulMcBride

I'm experiencing the same problem. If I figure anything out I will post the fix.

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.