Solved

extra space below iframe

Posted on 2016-08-29
9
60 Views
Last Modified: 2016-09-21
Hi..i have a problem with iframe where there is extra space under iframe. I try to remove it by adjusting the height but the content inside the iframe become shorter.
Here is my code:
<div style="border:1.5px solid #000;">            
 <div id="contentframe" style="position:relative; top: 0px; left: -380px;">
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>
</div>

i really hope somebody can help me to fix it. Thank you
0
Comment
Question by:Nur Amirah Roslan
  • 5
  • 3
9 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41774485
That code is obviously just a snippet - can you show us the full listing (preferably a link) and a screen shot to show us what we should be looking for.
1
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41774487
What are you trying to achieve with this line
<div id="contentframe" style="position:relative; top: 0px; left: -380px;">

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41774490
Pasting this into jsfiddle just gives a blank box. Can you provide a live example?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Nur Amirah Roslan
ID: 41775650
<div id="contentframe" style="position:relative; top: 0px; left: -380px;"> :i used this to control the position of my iframe
Capture1.PNG
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41775759
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>

Open in new window

Specifically

style="transform: scale(0.5);"

In other words you are saying - make this half the size I asked for - why are you doing that?

Take that out for starters.
0
 

Author Comment

by:Nur Amirah Roslan
ID: 41779173
thanks for your respond...at first,  i have to embed the whole website into the iframe and i set the width and height (width="1380" height="845") for that purpose but unluckily it produce the bigger size and i need to resize it  so that it fit the border size. That's why i used style="transform: scale(0.5);" and the website become smaller and left the white space. I want to know how to remove the extra space.

here is my jsfiddle:
https://jsfiddle.net/wcu2hzjx/2/
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41779273
Yes but you are contradicting yourself in the code - first you are saying I want the width to be 1380 then you are saying make the width half that - does not make sense.

If you want your iframe to fit width wise make the width 100%

If you are going to style your iframe you must do it as an element not a class - in your css you had

.iframe
Instead of
iframe

Your <div> tags where unmatched.
You had styling in your iframe to move left.

Here is a start https://jsfiddle.net/nxxv9410/
1
 

Author Comment

by:Nur Amirah Roslan
ID: 41780919
Thank you for your help sir...it help me alot
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41801120
Do you still require assistance on this?
If not you can close the question by selecting the answer that best fits your requirements and close the question.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

813 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

16 Experts available now in Live!

Get 1:1 Help Now