Kendall Weihe Kendall Weihe - 5 months ago 47
CSS Question

Rails iframe tag not filling entire page at 100%

I'm embedding google maps into my website and I want the map to be full screen. I have the following iframe code, but you can see in the screen capture it isn't filling the entire screen. I'm using Ruby on Rails so I'm betting it's some sort of rails default CSS that is causing it?

<iframe
height="100%"
width="100%"
frameborder="0" style="border:0"
src="<%= full_loc %>" allowfullscreen>
</iframe>




The entire view code looks like this (it's very raw at this point lol):

<% full_loc = "https://www.google.com/maps/embed/v1/place?key=AIzaSyAC6wrz55kNEjlpa3g4ssAw9T4NdSa2mbM
&q=" + @homes.location %>


<iframe
height="100%"
width="100%"
frameborder="0" style="border:0"
src="<%= full_loc %>" allowfullscreen>
</iframe>

<%= form_tag(homes_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Posts" %>
<%= submit_tag "Search" %>
<% end %>

Answer

The problem is most likely that the iframe's parents do not have a height set.

Please try adding height: 100%; for each parent of the iframe.