I'm looking to iframe in a web form that has variable height depending on the page of the form user is on, so that it will be responsive on mobile too
By setting the width it seems to display appropriately, however setting the height as shown in the HTML below seems to cut off all but the top of the form.
<iframe width="100%" height="100%" src="https://credit.omnisourcetech.com/mcgggg?affiliate=mcgggg&deposit=200&card=elite" frameborder="0" scrolling="no" />
Because of the nature of how this form will be embedded (into a Weebly site using the custom HTML option), it is not feasible to use CSS or javascript to accomplish this.
You can incorporate "style" into your iframe tag like so:
<iframe style="width:300px;height:40%;color:blue;">
Then just type like you would within a normal tag or a css file
Related
I want to preview the HTML content (which comes from the backend as a string) in my react application. I'm setting the iframe srcDoc as shown below.
<iframe width="100%" height="515px" srcDoc={previewTemplate}></iframe>
the width and height properties are setting the dimensions of the iframe. How to set the width and height of HTML content inside?
NOTE: HTML page is responsive
HTML page used can be viewed here
you can use the code below with peace of mind.
<iframe srcDoc={previewTemplate} onload="this.width=screen.width;this.height=screen.height;">
I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).
Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.
Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?
Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.
Edited to add:
Following the first two responses, I inserted the HTML line
<iframe style="width:100%; height:500px;overflow:auto;">
and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:
Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):
<center>
<div>
<iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
</iframe>
</div>
</center>
For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.
Even though you don't have direct access to the CSS, you can still change css by using inline styles.
The way you do that is by using the style="" inside the tag you want to change the CSS styles.
The way you make the width dynamic is by using the size as percentage instead of pixels.
For example:
<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>
Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.
You can use inline styling in the iframe element. Have a look at this link.
I set width to 100%, which means it will resize to whatever the size of the container. The height is fixed, but if it can't fit inside the container the overflow: auto; will make the scrolls show up.
<div>
<iframe style="width:100%; height:500px;overflow:auto;">
</iframe>
</div>
I am loading remote content in an iframe. Since the iframe width is smaller than the full width of the html doc, the mobile view of the site is displayed. Is there a way to force the desktop view? E.g. by "fooling" the CSS of the remote site into thinking that the width of the iframe is larger?
I think what you need is something like what is request here:
How can I scale the content of an iframe?
In the comments to Ixs answer is the link with an example:
http://jsfiddle.net/dirkk0/EEgTx/show/
What you need to do is to change the zoom of the page inside the iframe to trick media queries, so the idea is that a 1000px width iframe with zoom of 0.8 will trigger a ~1200px media query. You change the values to what you need.
Use scale and translate in an iframe:
Unfortunately, it seems that there is not a simple method to set the iframe tag as desktop view, but you can use scale and translate in iframe as following to have the desktop view of a URL in a part of your webpage.
<div style="width:300px;height: 220px;direction: rtl;background-color:red;">
<iframe src="https://iransitemap.ir" style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;" ></iframe>
</div>
I have this website: http://thc-racing.ucoz.com/index/forum/0-14
It can be seen that under the iframed forum there is a huge space, I made it so I can display as much as I can while navigating but, is there any way i can make the height adjust after each page inside is loaded?
Code:
<iframe
style="-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px"
height="4800" width="900"
frameborder="0" src="http://thc-racing.forumotion.co.uk/"></iframe>
I have access to CSS and Scripts on the forum.
Thanks
There is a similar question at Adjust width height of iframe to fit with content in it where you could use the code provided and modify it to adjust width and height with your own constant values, instead of auto-adjusting as the code provided in the accepted answer does.
I'm trying to embed a pdf document in html code, and I tried three different approaches, which actually gave me the same result:
<embed src="files/cv_aaragon_en.pdf" width="100%" height="100%">
<object data="files/cv_aaragon_en.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No problem, you can still download the PDF file.</p>
</object>
<iframe src="files/cv_aaragon_en.pdf" width="100%" height="100%">
shown in the figure:
Now I have the following questions:
The frames do not use the entire width of the page (which I believe is normal), because there is a lot of white space to both sides of the gray areas. This doesn't bother me.
If the definition is set to width="100%", why is it not taking the full width? Why are there gray regions? This bothers me because the pdf should be larger so that it becomes readable.
I could change the width, but I don't want to hard code its value so that the page looks good regardless of the device. Is there a way to obtain the actual width and put it in that width definition?
The same with the height, I need it to be much larger, but I don't want to hard-code its value. How is this done?
And finally, given the three approaches above, which one is the best in terms of loading speed?
Thank you.
You can try adding a style tag:
<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />