topic Re: Gallery Card Border Red in ArcGIS Hub Initiative in ArcGIS Hub Questions

Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Wed, 07 Aug 2024 18:58:56 GMT

Hello,

I was working in my hub, and I noticed that all of my gallery cards have a red border. I did not do this. Before, my cards did not have a border. Is there any way to fix this?

Thank you,

Sarah

Re: Gallery Card Border Red in ArcGIS Hub Initiative

Ed_ — Wed, 07 Aug 2024 19:12:34 GMT

Have you tried the Hub site on another browser and/or another computer?

Re: Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Wed, 07 Aug 2024 19:34:09 GMT

Hi Ed,

Thank you 🙂 I have tried the Hub site on other browsers and other computers, and I am still getting the same result 😞

Best,

Sarah

Re: Gallery Card Border Red in ArcGIS Hub Initiative

Ed_ — Wed, 07 Aug 2024 19:44:38 GMT

Hmm that's interesting yeah because I don't see this on my end. Maybe @KlaraSchmitt from the ESRI Hub Team might be able to help you on this 🙂

Re: Gallery Card Border Red in ArcGIS Hub Initiative

KlaraSchmitt — Wed, 07 Aug 2024 19:56:32 GMT

@SarahRadel Do you have any custom CSS used in your Hub site? Sometimes if you use a CSS selector that is too generic, your CSS will leak out of wherever you put it on the page and affect other elements. This is why we typically recommend at least setting a custom row class and then using that class in front of generic selectors.

.my-special-row .card {border-color: red}

Re: Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Thu, 08 Aug 2024 14:39:46 GMT

@KlaraSchmitt I do have a custom header, but I have never had this issue before with it. When inspecting the page, I can see where the issue is, but it will not accept my changes. Is there any way that you can help me with this?

Re: Gallery Card Border Red in ArcGIS Hub Initiative

KlaraSchmitt — Thu, 08 Aug 2024 14:44:26 GMT

@SarahRadel Sure. Paste the code you think is responsible.

When you say it's not accepting your changes, do you mean you cannot click the Apply button in the code editor? Do you see any warning icons in your code editor? (This would signify that you have a validation error and we cannot save code we know would compile in a way that would break things.)

Re: Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Thu, 08 Aug 2024 15:01:00 GMT

@Ed_ Thank you 😊

Re: Gallery Card Border Red in ArcGIS Hub Initiative

Ed_ — Thu, 08 Aug 2024 15:23:13 GMT

No worries, I am glad that I was able to point you in the right direction and @KlaraSchmitt is an excellent resource 🙂 Good luck! 👍

Re: Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Thu, 08 Aug 2024 20:06:10 GMT

Hi Klara,

Thank you so much for taking the time to help me with this issue. It looks like it is an inline style being defined on the HTML element itself. I do not think that my team and I can change the style at our level. Here is the link to our ArcGIS Hub: www.nccip.org

Re: Gallery Card Border Red in ArcGIS Hub Initiative

SarahRadel — Thu, 08 Aug 2024 21:40:39 GMT

@KlaraSchmitt The North Carolina Community Information Portal Team (www.nccip.org) has figured out how to fix this issue. The issue was that all of the gallery card borders in our initiative had changed to red. Upon inspection @RobHoward found the following: It computes the border accent color from other values on the page. In this case, it computes the borderAccent using the following code:

</> JavaScript

setBorderAccent: (e,t)=>(0,
n.default)(e).isLight() ? (0,
n.default)(t.body.text).lighten(40) : (0,
n.default)(t.body.text).darken(50)

The problem was in the body text color, which was set to a very dark red color, almost black. When the theme generator processed it, it made it 40% lighter since the call to isLight was false.

Solving this was an endeavor! If I could make a recommendation: expose the border accent as a setting instead of computing it from text color.

Thank you to everyone who stepped in to help us fix this issue.

Re: Gallery Card Border Red in ArcGIS Hub Initiative

KlaraSchmitt — Fri, 09 Aug 2024 14:25:26 GMT

Good job figuring it out! I appreciate your feedback and yes, we do run that function because previously we were hardcoded to a mid-level gray, but that couldn't been seen in dark themes, so then we switched to using a lightened version of the text color to try to account for theme variation. But I will pass along the feedback about exposing a method to set border-color and sorry it caused such mayhem for you.

Re: Gallery Card Border Red in ArcGIS Hub Initiative

howardro — Fri, 09 Aug 2024 17:36:50 GMT

You tagged to wrong Rob Howard 😁

Adding to Sarah's suggestion, I'd like to at least see the computed colors shown on the settings form even if they're read only. We've dealt with a lot of groups who lack the technical expertise to debug an issue like this and having the computed colors listed would give them a starting point that doesn't involve attaching a debugger.