HTML code no longer works in NearBy Instant App

1227
2
Jump to solution
01-11-2022 11:14 AM
BriannaTatum
New Contributor III

I'm currently working in ArcGIS Online configuring the NearBy Instant App, specifically in the About>App details>Introduction panel. When I originally configured the intro panel (before the AGOL update) I added what's suppose to look like a "button" in html (different from button tag, figure 1). 

Figure 1

BriannaTatum_0-1641928378369.png

Later on when making some edits I noticed that the text no longer displayed correctly and that it was a line. The code has not changed and works in other html editors. I'm wondering if this is a bug in the instant apps? 

I am using Map Viewer Classic and configured the popup with the same code and it displays correctly in the popup.  Here is the URL to my app https://sandiego.maps.arcgis.com/apps/instant/nearby/index.html?appid=3307f769426c4da1a6947e9d531919... 

I would like to note that the button tag also does not work in the introduction panel editor.

I have attached screenshots for reference.

Thanks!

1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

@BriannaTatum  it doesn't look like the styles are applied to the link in the info panel. Did you switch to HTML mode and add the styles?

You could also use the custom css option to apply the "button look" to the link tag. Here's the css you can paste into the Theme & Layout > Theme > Custom CSS option

.details-content a span {
    background-color: #0098db !important;
    padding: 10px 24px;
    text-align: center;
    color: #fff;
}

 

View solution in original post

0 Kudos
2 Replies
KellyHutchins
Esri Frequent Contributor

@BriannaTatum  it doesn't look like the styles are applied to the link in the info panel. Did you switch to HTML mode and add the styles?

You could also use the custom css option to apply the "button look" to the link tag. Here's the css you can paste into the Theme & Layout > Theme > Custom CSS option

.details-content a span {
    background-color: #0098db !important;
    padding: 10px 24px;
    text-align: center;
    color: #fff;
}

 

0 Kudos
BriannaTatum
New Contributor III

Hi @KellyHutchins I did switch to html mode, but it did not display. 😞 However, adding it to the Custom CSS Option worked, thank you for your lightening fast response. I appreciate it. 

0 Kudos