JQuery 布局 UI 和 (ESRI Dojo) 问题

Question

我正在尝试为中心布局 ui 设置一些框阴影以使用 ESRI map ，但无法使其正常工作。当我将 box-shadow 添加到中心布局时它工作正常但是当我添加 ESRI map (使用 dojo)时， map 隐藏了阴影。我已经向ArcGIS for Javascript forum提到了这个问题这里。

我想知道你们中的任何人是否有一些提示或想法可以用来解决这个问题？

HTML代码:

<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 代码:

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

谢谢，亚历克斯

Answer 1

将 div id 传递给 Esri 的 API 后，它会以各种方式操纵其属性和属性，此外还会附加几个子项(包括 svg 元素，如您所见)。我发现最好的方法是将 map div 包装在容器 div 中:

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

这样，当 API 接管“myMap”div 时，您的外部“myMapContainer”div 不会受到影响，因此您可以随意设置样式。