我有困難的時候把我的側邊欄旁邊我的谷歌地圖 - gmaps4rails

我想把我的邊欄與搜索結果旁邊我的谷歌地圖（我使用gmaps4rails）。我得到了他們並肩但問題是側邊欄沒有延伸到地圖的長度看圖像SideBar with google Map.我有困難的時候把我的側邊欄旁邊我的谷歌地圖 - gmaps4rails

這是我在我看來代碼

<div id="sideBar" class="pre-scrollable"> 
    <h2><%= @count%> results found </h2> 
    <br> 
<% @maps.each do |map| %> 
    <div> 
    <div class="" id="map_<%= map.id %>"> 

    <h4> 
     <%= link_to map.number, controller: "maps", action: "show", id: map.id%> 
    </h4> 


    <hr> 

    </div> 
    </div> 
<% end %> 

<%= link_to 'Return to Main Map', maps_path %> 

</div> 
<div id="map_wrapper"> 
<div id="map" style='width: 100%; height: 100%;'></div> 
</div>

這裏是我的代碼在CSS：

#map_wrapper { 
margin-left: 300px; 
height: 800px; 


} 

#sideBar{ 
width: 300px; 
height: 800px; 
position: absolute; 

}

我的目標是肩並肩，長度完全相同。

來源

2017-07-16 Jermaine Subia

嘗試都在一個'.wrapper'元件包裹，並用'.wrapper {顯示：彎曲; }'。然後從'＃map_wrapper'中刪除邊距，並從'＃sideBar'中刪除位置 –

@MichaelCoker我試圖對所提到的更改進行修改，但對我無效。謝謝你試圖幫助我。我會繼續努力，並在我這樣做的時候更新我的答案。 –

我將意見添加到代碼中。

工作響應例如：

#map_wrapper { 
 
    margin-left: 30%; /* should match sideBar width */ 
 
    overflow: hidden; /* cut off any overflow */ 
 
    height: 100%; /* fill up main div height */ 
 
} 
 

 
#sideBar { 
 
    width: 30%; /* adjust sidebar width as percentage of main div */ 
 
    max-height: 100%; /* Never exceed main div height on small screens */ 
 
    height: 400px; 
 
    position: absolute; 
 
    background: #131418; 
 
} 
 

 
#sideBar span { 
 
    color: #999; 
 
} 
 

 
.main { 
 
    max-width: 100vw; /* set max desired width for the ENTIRE set up */ 
 
    height: 400px; /* set max desired height for the ENTIRE set up */ 
 
    max-height: 100vh; /* make sure entire setup height never exceeds device height */ 
 
}

<!-- initilize map --> 
 
<script> 
 
    function initMap() {var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 40.674,lng: -73.945},zoom: 12,})} 
 
</script> 
 

 

 
<!--Your Map setup --> 
 
<div class="main"> 
 

 
    <div id="sideBar" class="pre-scrollable"> 
 
    <span>Sidebar content goes here...</span> 
 
    </div> 
 

 

 
    <div id="map_wrapper"> 
 
    <div id="map" style='width: 100%; height: 100%;'></div> 
 
    </div> 
 

 
</div> 
 

 

 

 
<!-- Load google API in the footer. --> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

來源

2017-07-16 05:22:18

這對我很有用，非常感謝你。我只需要對你的筆記做一些小的調整，就像魔術一樣。 –

@JermaineSubia太棒了。我很高興它做到了。謝謝！ –

如果您可以發佈頁面的html，這將是有幫助的。如果沒有這些，我可以說，使用絕對定位的元素時，應該指定top和left屬性值 - 特殊性有助於調試這樣的情況。另外，你應該知道他們在什麼位置。他們的父容器是他們絕對的定位。

另一件事我注意到，你有一個

class="pre-scrollable"

這不是你的問題記錄在案，所以我不知道這是否也影響了佈局。

來源

2017-07-16 04:24:22 Andrew

我有困難的時候把我的側邊欄旁邊我的谷歌地圖 - gmaps4rails

回答

相關問題