nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to remove drop shadow filter from Navigation Widget?

DavidBoiano

Hello,

I am driving myself crazy trying to make all these seemingly simple tweaks to make my Flexviewer application look more simplistic. I was able to comment out the DropShadowFilter that was part of the HeaderController widget, but I can't locate where to remove this shadow from the Navigation Widget. Thus far I have removed the rollOver events to remove the fade in/out feature directly from the NavigationWidget.mxml file. I can't find the drop shadow as part of a skin, style, or xml config.

[ATTACH=CONFIG]26898[/ATTACH]

Any help is greatly appreciated!!!

Thanks,

David

navigation_comparison.png

Find more posts tagged with

Accepted answers

rscheitlin

David,

In the Navigation.mxml just comment out or delete this code:

    <s:filters>         <s:DropShadowFilter alpha="0.5"                             blurX="10"                             blurY="10"/>     </s:filters>

All comments

DavidBoiano

Many thanks.

I had made those changes to a new "MyNavigationSkin" and then never referenced it so the changes didn't take effect. Looks correct now, finally! Thanks again.

David

rscheitlin

David,

Both can be found in the NavigationSkin.mxml:

    <s:Rect left="0" right="0" top="0" bottom="0"
            radiusX="3"
            radiusY="3">
        <s:fill>
            <s:SolidColor alpha="{getStyle('contentBackgroundAlpha')}" color="{getStyle('contentBackgroundColor')}"/>
        </s:fill>
    </s:Rect>

DavidBoiano

Thank you, Robert! You are the cure to my headaches. I think I am still struggling with the overall Viewer architecture and where/when/why one application/skin is called or takes precedence over another....but I am learning!

As you might know, my end goal is trying to make my application look like the default look of the Flex API components. Now that the shadow is removed, all that seems left to complete the Navigation Widget is to round out the top and bottom more (a cornerRadius property somewhere?) and match the shade of gray to the darker one.

Do either of these items stand out as an easy fix or something you know offhand? I can try my best to match color by sight but I have been at a loss determining how to round it out more.

Best,

David

rscheitlin

David,

In the Navigation.mxml just comment out or delete this code:

    <s:filters>         <s:DropShadowFilter alpha="0.5"                             blurX="10"                             blurY="10"/>     </s:filters>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.