style pop up in v4.20

542
3
09-07-2021 07:45 AM
KenjooYeap
New Contributor II

Hi, 

 

I am wondering if there's a way to create up pop up for v4.20, I saw this but it's for v3.x.

I tried to style overwritting the exisiting css of .esri-popup but there is quite a few things that needs to be overwrriten hence wondering if there's another way. 

Thanks! 

0 Kudos
3 Replies
JeffreyWilkerson
Occasional Contributor III

Style your popup by configuring the popup in the ArcGIS Service and choosing 'A custom attribute display'.  Then use the 'Configure' button to enter your own html.  I haven't found an easy to add CSS classes, but you can use inline styles to get what you want, such as:

<p style="font-size: 1.1em; color: #0e4f49;">Located at {expression/expr8}, {expression/expr9}, light rail station <span style="text-decoration: underline;">{StationName}</span> is currently <span style="text-decoration: underline;">{StationStatus}</span>.</p>
<table border="1" style="width: 191px; color: #ffffff; background-color: #177c72; border-color: #ffffff;">
    <tbody>
    <tr>
        <td style="width: 71px; background-color: #12635b;"><strong>Benches</strong></td>
        <td style="width: 10px;">{expression/expr0}</td>
        <td style="width: 69px; background-color: #12635b;"><strong>Restroom</strong></td>
        <td style="width: 29px;">{expression/expr4}</td>
    </tr>
    <tr>
        <td style="width: 71px; background-color: #12635b;"><strong>Bike Racks</strong></td>
        <td style="width: 10px;">{expression/expr1}</td>
        <td style="width: 69px; background-color: #12635b;"><strong>TVM</strong></td>
        <td style="width: 29px;">{expression/expr5}</td>
    </tr>
    </tbody>
</table>
<p style="font-size: 0.8em;"><a href="{Image}" rel="nofollow ugc" target="_blank"><img alt="Station photo" height="150" src="{Image}" width="200" /></a></p>
<p style="font-size: 0.8em;"></p>

 

0 Kudos
KenjooYeap
New Contributor II

Hi @JeffreyWilkerson , thank you for your reply. I assume that by ArcGIS service you mean using the ArcGIS webapp interface? I am only using the JSAPI and building the maps with React not through the ArcGIS online portal. Or do you mean there's a way to configure it such that the API would return me the pop up as styled in the portal? 

 

0 Kudos
JeffreyWilkerson
Occasional Contributor III

Yes, I mean going to the service on ArcGIS Online or your own Portal server and setting the Popup look and feel there.  I'm sure there's a way to do it through the API but I've never done that since it is so easy to do it this way.  

 

0 Kudos