0

I am trying to get some box-shadow to the center layout ui to work with the ESRI map but cant get it to work. When I add box-shadow to to the center layout it works fine but when i add the ESRI map (using dojo), the map hides the shadow. I already mentioned the issue to ArcGIS for Javascript forum here.

I was wondering if any of you had some tips or idea that I could use to fix this issue?

HTML code:

<div class="ui-layout-center">
    <div id="map"><span id="shadow" style="height: 100%; width: 100%;"></span></div>
    <button class="btn btn-danger btn-sm" title="Toggle layout" type="button" style="position: absolute; left: 2px; bottom: 2px; right: auto;" onclick="myLayout.toggle('west')">
        <span class="glyphicon glyphicon-resize-small"></span>
    </button>
</div>

CSS code:

.ui-layout-center {
    background: white;
    padding: 0; /* IMPORTANT - remove padding so pane can 'collapse' to 0-width */
    box-shadow: inset 0 0 20px #000000 !important;
}
.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;
}

Thank you, Alex

user27186
  • 93
  • 1
  • 7
  • Does [this question](http://stackoverflow.com/questions/5505118/css-box-shadow-hidden-z-index-does-not-fix) help? I don't think this is an ESRI JS API-specific thing. – Juffy Aug 29 '14 at 00:05
  • I actually just found a solution to this in css: `svg#map_gc { box-shadow: inset 0 0 20px black; -webkit-box-shadow: inset 0 0 20px black; -moz-box-shadow: inset 0 0 20px black; }`. Thanks for your help! – user27186 Aug 29 '14 at 15:42

1 Answers1

0

Once you pass a div id to Esri's API, it will manipulate its attributes and properties in all sorts of ways, in addition to appending several children (including the svg element, as you've discovered). What I've found works best is to wrap the map div in a container div:

<div id="myMapContainer" style="/*insert style here*/">
    <div id="myMap"></div>
</div>

That way, when the API takes over the "myMap" div, your external "myMapContainer" div won't be affected, and thus you can style it as you please.

Steve Henningsgard
  • 56
  • 7