I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
Related
Not sure if this is possible or not, my requirement is something like this - I have a web page having three div which are wrapped inside another main div having display:flex so that all the three div can appear adjacent to each other. Now the issue is that in the middle div I am extracting some data from my database which itself contains DIVs. the divs may not be properly closed i:e few might not be closed with /div. So when the data appears on the middle div, the third div sometimes goes out of the flex box causing issue in the layout. Is there any possible way to avoid this ? Hope I am able to explain my issue.
As a rule, we never inject user generated content into a page without properly sanitising it to help prevent security vulnerabilities such as XSS. Please research HTML sanitisation and make sure you're processing this user generated content safely.
With that being said, browsers are quite forgiving of improperly formatted markup and will try their best to render what you give them. So to prevent this user generated content messing with your page you're going to want to isolate these documents from the rest of your page.
Instead of dropping this user generated html directly in the page you could provide it as a srcdoc to an iframe like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>foo</title>
<style type="text/css" media="screen">
.container {
display: flex;
}
.one, .two, .three {
height 200px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.inline {
border: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
</div>
<div class="two">
<iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
</div>
<div class="three">
<iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
</div>
</div>
</body>
</html>
I have a <embed> element inside a div that contains a .txt file and I want to set it to automatically fit the size of the txt files contents.
However none of the tips I found here seem to work.
height: 100% or auto does absolutely nothing.
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<style>
body {
background: #aaa;
}
div {
width: 800px;
background: white;
}
embed {
padding: 25px;
width: 750px;
height: 100%;
}
</style>
</head>
<body>
<div>
<embed src="file.txt">
</div>
</body>
</html>
Also using <object> instead of <embed> as suggested in many questions here doesn't change the behavior at all.
It can't be that hard to do something this basic in CSS?
You maybe can try to use the font-size property of CSS.
An example of usage with it:
embed {
font-size: *what you need here*;
width: 100%;
}
Otherwise you may wanna look into CSS properties in JavaScript, and read lines, length etc. of content and base of it and take the users screen width into fact for the best result!
EDIT:
You could use XMLHttpRequest, AJAX, jQuery aswell in JavaScript.
And then change font size based on length of content.
I am using the embed tag to display a pdf file. It works perfectly, except for the fact that the "height" property won't work when I define height with % ("width" does what it's supposed to do). It works when I use px instead of %, and I have tried changing the numbers, but none work... Does anyone have any clue why?
Thank you!
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf" width="60%" height="80%"/>
<style>
#pdf {
}
</style>
</body>
</html>
With the <embed> tag, the height attribute must be displayed in pixels. Percentages are not allowed.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
#pdf {
height: 800px;
width: 600px;
}
</style>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf"/>
</body>
</html>
Source on MDN
The height=x% is depend on the height of its parent element, because it's relative to its parent. In your case, body is the parent of embed element. So if you set a height property to your body element then it will work.
this piece of code works:
<style>
embed {
margin: 0 !important;
border: 0;
width: 100%;
height: 97vh;
}
</style>
<body>
<center>
<embed src="your.pdf#toolbar=0&navpanes=0" type="application/pdf" />
</center>
</body>
From my previous answer https://stackoverflow.com/a/74354395/10802527
For a simple page all 3 behave identically their height and width must be defined in pixels or translated as %view, however browsers may add a frame embeding border of their own, so for height reduce a few points from 100vh similar reduce 100vw to avoid other embedment border/scrollbar anomalies each browser can vary but for Microsoft Edge I find style
embed, iframe, object {
margin: 0!important;
border: 0;
width: calc(100vw - 18px)!important;
min-height: calc(100vh - 18px)!important ;
}
works more often than not or as shown below simpler width: 99vw; height: 97vh; is a good place to work from
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, embed, iframe, object { margin: 0!important; border: 0; width: 99vw; height: 97vh; }
</style>
</head><body><center>
<div>embed
<embed src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" >
</div>
<div>object
<object data="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" typemustmatch="true" >an</object>
</div>
<div>iframe
<iframe src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" style="border:none;" >an</iframe>
</div>
</center></body></html>
I think this code will help your problem well, if you've not already tried this one.
<object data="/pdf/mysample.pdf" type="application/pdf" width="100%" height="80%">
</object>
Greetings.
Feel free to tell me the result of this try.
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.
So the first html file (which has a red background) look like:
<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</body>
</html>
The second (which has a blue background):
<!DOCTYPE html>
<html>
<body style="background-color: blue;" />
</html>
If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..
With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:
If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
CSS:
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }
HTML:
<div id="wrap">
<iframe src="..." frameborder="0" id="iframe"></iframe>
</div>
Live demo: http://jsfiddle.net/5G5rE/show/