Solved

Ask iframe to use entire area

Posted on 2014-07-25
11
232 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
  • 5
  • 5
11 Comments
 
LVL 13

Expert Comment

by:duncanb7
Comment Utility
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
Comment Utility
Very interesting.  body style gets stripped from the syntax by default?
0
 
LVL 13

Expert Comment

by:duncanb7
Comment Utility
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
 

Author Comment

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

Expert Comment

by:duncanb7
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:frugalmule
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Add this CSS

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

Open in new window

0
 

Author Closing Comment

by:frugalmule
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now