Выровняйте кнопку и кнопку раскрывающегося списка на центральной панели

Это, вероятно, простой вопрос, но я только начал с Dojo/Javascript и не знаю, что я делаю неправильно.

Я начал создавать свое приложение Dojo программно, и все, что я хочу знать, это как правильно выровнять виджеты (в моем случае это кнопка переключения и кнопка раскрывающегося списка) в центральной панели рядом с друг друга и с правильным интервалом между ними (центральная панель содержит карту, и я хочу, чтобы эти кнопки мирно лежали на ней, не закрывая/ограничивая ее пространство другой панелью). Я хотел бы, чтобы кнопка раскрывающегося списка «Карты» находилась рядом с кнопкой переключения «Легенда/Слои», выровненной по ней и правильно расположенной.

Когда я указываю регион (в моем случае тот, где карта находится с id = "mapDiv"), создавая их, они скупо перекрывают друг друга, но это регион, который я хочу, чтобы они были ... только один рядом с каждым разное.

Я знаю, что это может звучать как вопрос о ГИС/картографии, но я думаю, что он более тесно связан с Dojo/Javascript (CSS/HTML?), поэтому я задаю его здесь.

Я настроил эту скрипту code, чтобы показать вам, что я имею в виду

Заранее спасибо за помощь,

m


javascript html css arcgis-js-api dojo
person mic    schedule 10.01.2015    source источник
comment
у него много проблем, но в основном избавьтесь от ВСЕХ ваших объявлений position:absolute и работайте оттуда. Просто помните: в большинстве случаев position:absolute неверно, и даже в ограниченное время это выглядит правильно, но снова неправильно.   -  person Devin    schedule 10.01.2015
comment
Привет @Devin, спасибо за ответ. Вы должны извинить мой недостаток опыта, но я действительно не понимаю вас. Это не единственное абсолютное объявление для .esriSimpleSliderTL (мне не нравится положение кнопок увеличения/уменьшения масштаба по умолчанию). Я обновляю скрипту в соответствии с вашим предложением, но я все еще застрял на одном и том же.   -  person mic    schedule 10.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

хорошо, проверьте свой код с помощью инспектора, и вы увидите, что все ваши элементы имеют встроенные стили, многие из них с «абсолютной» позицией. Ваша проблема здесь:

 <span class="dijit dijitReset dijitInline dijitBorderContainer-child diji…ijitBorderContainerPane dijitAlignMapDiv dijitDropDownButton" widgetid="downButtonMaps" style="left: 5px; top: 56px; position: absolute;">

    <span class="dijitReset dijitInline dijitButtonNode" role="presentation" data-dojo-attach-event="ondijitclick:__onClick"></span>
    <input class="dijitOffScreen" type="button" data-dojo-attach-point="valueNode" aria-hidden="true" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" value=""></input>

</span>

Так что просто добавьте эту строку в свою таблицу стилей CSS

.dijitReset {
    position: relative !important;
}

и это должно работать

person Devin    schedule 10.01.2015
comment
ВАУ, я это написал? :-| Я написал код, не зная об этом! Что ж, в следующий раз проверю более внимательно. Спасибо за помощь, да, получилось! ;-) - person mic; 11.01.2015