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; } } }

Map shadow

AlexGole

Hi all,

I am looking to add some show between the west and east panels (JQuery UI layout). I tried adding box-shadow: inset but dont get any positive results except in Firebug when I change the SVG map-gc.

End result should look like this:

As I have it, only the header box-shadow shows:

Find more posts tagged with

Accepted answers

RiyasDeen

Hi Alex,

Is this what you are after?

Edit fiddle - JSFiddle

All comments

AlexGole

Riyas and anyone else encountering the same issue as mine,

I found the solution to my problem. It seems like it is one of the issues that exist when working with dojo and JQuery at the same time. The fix is the following:

CSS:

svg#map_gc {

box-shadow: inset 0 0 20px black;

}

Thank you,

Alex

AlexGole

It is not working with JQuery layout UI but it looks great in dojo. Thank you for sharing! I will need to find a fix in Jquery.

RiyasDeen

Hi ALex,

My knowledge on JQuery Layout is limited. If you look at my code.

Below span tag

<span id="shadow" style="height: 100%; width: 100%;"></span>

And below CSS style are the one's which is creating the map shadow.

#shadow {
         -moz-box-shadow:    inset 0 0 10px #000000;
         -webkit-box-shadow: inset 0 0 10px #000000;
         box-shadow:         inset 0 0 10px #000000;
  z-index: 10000;
  background: transparent;
  position: absolute;
  left: 0px;
  top: 0px;
}

The span tag is placed within the map container, as long as you place the span tag inside your map container div and have the CSS class you should get the shadow.

AlexGole

Riyas,

This is exactly what I am after. The only problem with this is that I am using JQuery UI Layout not dojo. the box-shadow: inset.... works great for this layout too but when I add the map to the center pane then the map it self hides the inset shadow. Playing around with Firefox, I saw that it could work if I add some css to "map.gc" SVG...

Now when adding some code "box-shadow: inset....!important" in my script, it does not do anything. Any idea?

By the way I really like the shadow you added to the slider!

Alex

RiyasDeen

Hi Alex,

Is this what you are after?

Edit fiddle - JSFiddle

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.