Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Ask iframe to use entire area

Posted on 2014-07-25
11
Medium Priority
?
248 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
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

579 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