Полноэкранная карта с семантическим UI

Я пытаюсь отобразить боковую панель с семантикой ui и полноэкранную карту.Полноэкранная карта с семантическим UI

Сделка заключается в том, что я буду строить события карты для переключения боковых панелей. Моя проблема связана с CSS.

Я могу показать все, как ожидалось, но у меня есть первый пункт в меню, который всегда отображается, отталкивая много вещей.

Это отношение HTML структура:

<body> 
<div class="ui sidebar vertical menu"> 
    <a class="item"> 
     Item 1 
    </a> 
    <a class="item"> 
     Item 2 
    </a> 
    <a class="item"> 
     Item 3 
    </a> 
</div> 

<div class="pusher"> 
    <div id="map"></div> 
</div> 

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript" src="bower_components/semantic/dist/semantic.min.js"></script> 
<script type="text/javascript" src="bower_components/leaflet/dist/leaflet.js"></script> 
<script> 
    var map = L.map('map').setView([51.505, -0.09], 13); 
    $('.ui.sidebar').sidebar('toggle'); 
</script> 
</body>

Вот изменения, которые я сделал в CSS:

body { 
background-color: #FFFFFF; 
display: flex; 
height: 100vh; 
flex-direction: column; 
} 

#map { 
    height: 100vh; 
    width: 100%; 
}

Пример того, как это ведет себя, как и при загрузке страницы, и после того, тумблер:

источник

2016-09-22 George Silva

-1

попробовать это

<body> 
 
    
 
<style> 
 
    .unstyle{ 
 
    background: rgba(0,0,0,.0)!important; 
 
} 
 
</style> 
 

 
<div id="topbar" style="width: 100%; height: 37px;" class=""> 
 
    <button id="btn"> toggle</button> 
 
    <button style="float: right"> toggle</button> 
 
</div> 
 
<div id="app" class="" style="height: 94%; width: 100%"> 
 
    <div class="ui left vertical menu sidebar unstyle"></div> 
 
    <div class="pusher" style="height: 100%; width: 100%;"> 
 
    <div id="mapid" style="height: 100%; width: 100%; position: relative;"> </div> 
 
    </div> 
 
    <script> 
 
    $('#app .ui.sidebar') 
 
    .sidebar({context: $('#app')}) 
 
    .sidebar('setting','transition', 'overlay') 
 
    .sidebar('setting','dimPage', false) 
 
    .sidebar('setting','closable', false) 
 
    .sidebar('attach events', '#btn') 
 
    .sidebar('toggle'); 
 
    </script> 
 
</div> 
 

 
</body>

result screenshot

источник

2017-06-08 21:58:01 user5786721

Полноэкранная карта с семантическим UI

ответ

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