JQuery layout UI и (ESRI Dojo) issue

Я пытаюсь получить некоторую коробчатую тень в центре макета ui для работы с картой ESRI, но не могу заставить ее работать. Когда я добавляю тень для тени в макет центра, он отлично работает, но когда я добавляю карту ESRI (используя додзё), карта скрывает тень. Я уже упоминал о проблеме здесь ArcGIS for Javascript forum.JQuery layout UI и (ESRI Dojo) issue

Мне было интересно, есть ли у кого-нибудь из вас какие-то советы или идеи, которые я мог бы использовать, чтобы исправить эту проблему?

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

Спасибо, Alex

источник

2014-08-27 user27186

Есть ли [этот вопрос] (http://stackoverflow.com/questions/5505118/css-box-shadow-hidden-z-index-does-not-fix) help? Я не думаю, что это ESRI JS API-специфическая вещь. – Juffy

Я на самом деле просто нашел решение для этого в css: 'svg # map_gc { box-shadow: inset 0 0 20px black; -webkit-box-shadow: вставка 0 0 20px черная; -moz-box-shadow: inset 0 0 20px black; } '. Спасибо за вашу помощь! – user27186

После того, как вы передадите Див идентификатор API Esri, он будет манипулировать его атрибуты и свойства всеми возможными способами, помимо добавления нескольких дочерних элементов (включая элемент svg, как вы обнаружили). То, что я нашел, работает лучше всего, чтобы обернуть карту DIV в контейнере DIV:

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

Таким образом, когда API берет на себя «MyMap» DIV, ваш внешний «myMapContainer» ДИВ не повлияет , и, таким образом, вы можете стилизовать его, как вам будет угодно.

источник

2016-11-19 22:59:36

JQuery layout UI и (ESRI Dojo) issue

ответ

Смежные вопросы