Changing Font Size and Font Weight of Popup Text

494
2
Jump to solution
12-23-2021 11:52 AM
IfThenTim
New Contributor III

 

If you wanted to increase the font-size and font-weight of popup text in the Intro to popups example, how would you do that?

I am not in love with what I can get to work:

  • inline styles
  • !important
  • maybe writing my own widget theme?

As a result, I am having a there must be a better/smarter way moment. <g> It seems unlikely that I am meant to work this way for this simple kind of change, but I still have a lot to learn about working with the API.

If you watched the ArcGIS API for Javascript&colon; Better UX with Popups video (March 2021), you might think you can use a browser inspector to figure out targeting like:

 

.esri-popup__content {
	font-size: 14px;
	font-weight: 500;
}

 

That does not work (for me) outside of playing with CSS in the inspector. And if you think that approach should work, I invite you to try it in CodePen or similar and see what happens. 

If I am missing something, I would be interested to know. Thanks!

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

You can get more specific. with the css. This works.

article.esri-popup__content {
	font-size: 14px;
	font-weight: 500;
}

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor II

You can get more specific. with the css. This works.

article.esri-popup__content {
	font-size: 14px;
	font-weight: 500;
}
IfThenTim
New Contributor III

Thank you for your assistance.

0 Kudos