topic Re: Set Transparency of Legend Window in WAB DE in ArcGIS Web AppBuilder Questions

Set Transparency of Legend Window in WAB DE

TimHayes — Wed, 14 Jun 2017 13:41:48 GMT

I am using WAB DE 2.4. In what file do I change the transparency setting in the Legend Window? Where is this file?

Re: Set Transparency of Legend Window in WAB DE

RobertScheitlin__GISP — Wed, 14 Jun 2017 14:22:07 GMT

Tim,

Are you talking about the whole widget or just the legend contents?

Re: Set Transparency of Legend Window in WAB DE

TimHayes — Wed, 14 Jun 2017 14:25:38 GMT

By default the background inside the Legend Window is solid white. I want to change the transparency of this white space. Just cannot seem to locate the file in which to do this.

Re: Set Transparency of Legend Window in WAB DE

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:33:04 GMT

Tim,

Add these two css rules to the Legend widgets style.css file:

.jimu-widget-frame.jimu-container {
    background-color: rgba(255,255,255,0.3);
}

.jimu-panel {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
}‍‍‍‍‍‍‍‍

Adjust the 4 alpha property as desired.

Re: Set Transparency of Legend Window in WAB DE

PayelMallick — Wed, 25 Sep 2019 05:08:36 GMT

There are Legend widget in both server folder and stem app folder. The changes are not reflecting

Re: Set Transparency of Legend Window in WAB DE

RobertScheitlin__GISP — Wed, 25 Sep 2019 12:31:48 GMT

Payel,

Change in the stemapp folder only apply to new apps for existing apps you have to make the change in the server\[app#]\widgets\Legend folder. Once you make the change refresh your browser (and it is sometimes necessary to clear your browsers cache).

Re: Set Transparency of Legend Window in WAB DE

Mina — Wed, 04 Mar 2020 20:14:16 GMT

Hi Robert,

When I tried adding your code to the specific widget's style.css, the transparency only appears when moving the panel window (I'm using the Jewelry Box theme). How can we make the transparency appear right when the widget panel is opened without the need to move it? Also, this transparency effect is added to all the floating widgets even though I only changed the css for one specific widget. By the way, I'm using WAB Dev 2.11. I appreciate your feedback!

Re: Set Transparency of Legend Window in WAB DE

RobertScheitlin__GISP — Wed, 04 Mar 2020 22:20:22 GMT

Mina,

I am not aware of any css rule you could apply to make this specific to just the legend widgets panel.

Re: Set Transparency of Legend Window in WAB DE

Mina — Wed, 04 Mar 2020 22:40:32 GMT

Robert,

OK, how about making the transparency of the panel appear without having to move the panel window? In this case, if we just open the widget, it's not transparent unless you move the panel window. Thank you!

Re: Set Transparency of Legend Window in WAB DE

RobertScheitlin__GISP — Thu, 05 Mar 2020 13:44:41 GMT

Mina,

I do not see that issue on my end, unless I am using a organizational theme color.