Solved

Ask iframe to use entire area

Posted on 2014-07-25
11
242 Views
Last Modified: 2014-07-26
Here is the actual page.  Here is a video showing a visual of the trouble I am having http://screencast.com/t/zjXoRWfkmR31 and the iframe syntax is below.  Assistance is greatly appreciated.
<iframe src="https://docs.google.com/forms/d/138XZwm17GPB8Gy0zbsUNV-eQFPa7_o_7pbHzrE7Ho0k/viewform?embedded=true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="100%" width="100%">Loading...</iframe>

Open in new window

0
Comment
Question by:frugalmule
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40221016
You need to set iframe parent node to fix width and height,
width=100% is inherited from his parent node, try this for exmaple
 such as body or div tag
<body style="width:1000px; height:1000px">
<iframe src="https://docs.google.com/forms/d/138XZwm17GPB8Gy0zbsUNV-eQFPa7_o_7pbHzrE7Ho0k/viewform?embedded=true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="100%" width="100%">Loading...</iframe>
</body>

Open in new window


Duncan
0
 

Author Comment

by:frugalmule
ID: 40221019
Very interesting.  body style gets stripped from the syntax by default?
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40221020
body style gets stripped from the syntax by default?

What is that mean ? Pleae write it in detail

set the width and height for your wrapper tag to iframe if
you want to use width="100%"

I tested it works at my side

Duncan
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:frugalmule
ID: 40221027
Here is my attempt in detail http://screencast.com/t/XHXu0VCdfZK2
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40221032
you question is "Ask iframe to use entire area"

Could you send us your actul page at http://frugalmule.com/payreq/ ?

Otherwise, it is hard to understand what you want

Duncan
0
 

Author Comment

by:frugalmule
ID: 40221035
Now I am not sure what you mean?
It is a wordpress page.
Here is a detailed video showing what is happening http://screencast.com/t/XHXu0VCdfZK2.

Here is the page www.frugalmule.com/payreq.
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40221038
Could you send  the index.php to us at
http://frugalmule.com/payreq/index.php ?
Your issue the iframe is that site could not get entire page Right ?


Duncan
0
 

Author Comment

by:frugalmule
ID: 40221049
Thank you for looking.

Here is a screenshot of it also in notepad ++  http://screencast.com/t/oIBwMq0w1utz
index.php.txt
0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 500 total points
ID: 40221052
Since it is controlled by wordpress,  

You can try this to set any width and heigh you want  in the following examples

Duncan

Example-1
<div style="width:1000px; height:1000px">
<iframe src="https://docs.google.com/forms/d/138XZwm17GPB8Gy0zbsUNV-eQFPa7_o_7pbHzrE7Ho0k/viewform?embedded=true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="100%" width="100%">Loading...</iframe>
</div>

Open in new window


Or you can do
Example-2
<iframe src="https://docs.google.com/forms/d/138XZwm17GPB8Gy0zbsUNV-eQFPa7_o_7pbHzrE7Ho0k/viewform?embedded=true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="1000px" width="1000px">Loading...</iframe>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40221482
Add this CSS

#main-content, #main-content article,#main-content div {
    height: 100%;
}

Open in new window

0
 

Author Closing Comment

by:frugalmule
ID: 40221655
I tried example two and it worked.  It turns out it was the percentage it didn't like and I did not catch the 1000px thing which worked very well.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question