Select to view content in your preferred language

ElevationProfile widget in dark theme

2269
3
Jump to solution
11-18-2023 07:01 AM
ChristopheSuter
Regular Contributor

With dark stylesheet, the popover in the ElevationProfile widget text stays dark, so that it is unreadable

ChristopheSuter_0-1700319619880.png

 

See codepen below

https://codepen.io/christophesuter/pen/qBgxWBp

Does anyone have a workaround ? Or know which css variable is used for this ?

0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Regular Contributor

Hi @ChristopheSuter - this bug will be fixed in the next version of the API (v4.29). Thanks for reporting it!

View solution in original post

3 Replies
JoelBennett
MVP Regular Contributor

This is a new bug in 4.28.  The tooltip and its contents are not document elements, but are instead graphics rendered on a canvas element, so they're not controllable via CSS.  The only workaround I have is to alter my locally hosted copy of the SDK.

The problem appears to occur in the "_updateTextColor" method of the undocumented esri/chunks/Tooltip module.  I'm not sure if the problem is because the function is called when it shouldn't be, or because something in the function isn't working as intended.  Either way, the function overrides the theme's font color with another color that doesn't stand out very well.  It happens with the light theme too, which my apps use.

The construction of the Tooltip instance takes place in the esri/widgets/ElevationProfile/support/chartUtils module.  It looks something like this:

const b = Q.Tooltip.new(c.root, {
	forceHidden: !0,
	getFillFromSprite: !1,
	getLabelFillFromSprite: !1,
	pointerOrientation: "vertical",
	visible: !1
});

 

I've modified my local copy to include a property called "autoTextColor" with its value set to false like so:

const b = Q.Tooltip.new(c.root, {
	autoTextColor: !1,
	forceHidden: !0,
	getFillFromSprite: !1,
	getLabelFillFromSprite: !1,
	pointerOrientation: "vertical",
	visible: !1
});

 

This prevents the aforementioned "_updateTextColor" function from altering the label's color.  I don't know of any better way to make this work, since there doesn't appear to be a way to get a reference to the Tooltip from the ElevationProfile widget.

@Noah-Sager perhaps you can add this one to the list...Happy Thanksgiving btw.

AnneFitz
Esri Regular Contributor

Hi @ChristopheSuter - this bug will be fixed in the next version of the API (v4.29). Thanks for reporting it!

AndrewWinchell1896
New Contributor

Good to know this will be fixed in the new release. I assume we will still be unable to modify this color directly with CSS in the event we wanted a specific color?

0 Kudos