Images not rendering with dangerouslySetInnerHTML - html

React 15.6.2 (I know, that's where we are for now).
I'm trying to render an html page using dangerouslySetInnerHTML (it's sourced from our server, no user input). It's working, except images aren't rendering - I just get the broken image icon. There are no errors or warnings in the console. Same problem on Chrome, Firefox and Edge.
Here's the test html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
img {
width: 80%;
height: 80%;
overflow: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1 align="center">Test page</h1><br/>
<img src="images/help-feature_main-menu.jpeg" alt="main menu" style="vertical-align:middle"/><br/>
</body>
</html>
Here's the code to render the page
componentDidMount() {
fetch('/assets/getting_started/index.html')
.then(response => {
if(response.status >= 400) {
throw new Error(`${response.status}: ${response.statusText}`);
}
return response.text();
})
.then(html => this.setState({ html: html }));
}
render() {
return (
<Segment>
<div dangerouslySetInnerHTML={{ __html: this.state.html }} className="html-import" />
</Segment>
);
}
I've tried the path for fetch in different forms, including putting the image files in the same dir as the source file.
I've checked the contents of this.state.html and it looks good, i.e. the img tag is in there looking right.
If I render the page in an iframe like below, it works correctly with the images. But I don't want to do this because I end up with a scrollbar for both the iframe and the browser window, which is awkward, or if I mess with the height prop of the iframe's container (e.g. height: 70vh), I can get it sized within the window so there's no window scrollbar, but at different heights the iframe will still start to cut off, or it ends up looking too small for the height of the window.
<div className="html-iframe-container">
<iframe src="/assets/getting_started/index.html"</iframe>
</div>
Any suggestions? Thanks

Related

Blocking scroll in CSS doesn't work

I want to block scroll in my pages
this is the html pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="frise.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script>
var a;
function start()
{
a = new frise("frisekk", 'Mon Nov 15 2014 19:25:00', 'lab', 600);
}
</script>
</head>
<body onload="start();">
<div id="blocantiscroll">
<div id="frisekk"> <br/> </div>
</div>
</body>
</html>
So I call my CSS in <div id="blocantiscroll">
but nothing happen, I have look on the web and this should work but it doesn't, the sroll is always active.
Is there a problem in my html page or in my CSS ?
my CSS :
blocantiscroll {
height: 100%;
overflow: hidden;
}
blocantiscroll is an ID so you need to use # in your selector:
#blocantiscroll {
height: 100%;
overflow: hidden;
}
Your current selector is looking for an element of type blocantiscroll which doesn't exist.
Further reading
Also, if you want #blocantiscroll to be 100% height of the window, you will need to set the below:
html, body {
height: 100%;
}
blocantiscroll is an ID..
so you need to specify # before "blocantiscroll"
give it as:
#blocantiscroll
Add this to your css
body {overflow: hidden;}

IE8 border and margin issue

I have a styling issue on our company's intranet that I can't figure out. It only happens with IE8 or lower. IE 9/10, FF, Chrome, Safari and Opera are all OK.
The issue is a border and paddings are appearing even though I've used border:none;, margin:0!important; and padding:0!important; and it's pushing the content inside over to the right and causing a horizontal scroll bar to appear.
This is where it gets confusing...
Our intranet (asp) has the "panels" that you can see in the screenshot above. There is a "Custom HTML" panel that will allow me to insert HTML into the SQL database cell for that panel, but to view a complex html, it's best to store a file.html page and pull it into the panel using an iframe. I can supply the iframe reference and the css using in my file.html... which one is the most likely culprit?
iframe reference in SQL database:
{top|Members,Forum,HTML($$Summit 2013 Information$$<iframe src="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" width="768" height="1926" style="border:none!important; margin:0px!important; padding:0px!important;"><p>Your browser does not support iframes.<br /><br />Click here to open in a new window</p></iframe>)}{middleLeft|}{middleRight|}{bottom|}{hidden|Announcements,Items,Tasks,Collections,WhatsOn,Activity,RSS,QuoteOfDay,Absentee}
Summit2013.html with irrelevant styles and html removed
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#iframe-wrapper {
display: block;
width:760px;
padding:0px;
margin:0 auto;
}
...
</style>
</head>
<body style="margin:5px 0 0 7px !important;">
...
<iframe frameborder="0" ...></iframe>
Margins IIRC you can define in the inner page.

want to include one html page to another page in the client-side

I have a common header for all the html pages, so I want the header.html page to be included in another html page.
Suggest some ways as this header needs to be given in all the html pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
header#arriba {
width:1350px;
height:30px;
clear:both;
margin:auto;
text-align:center;
background-color:red;
color: white;
}
header#arriba img {
vertical-align:middle;
margin:2px 700px 2px 35px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}
header img{
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<header id="arriba">
<h2><img src="header.png" alt="1" width="150px" height="25px"/>Data</h2>
</header>
</body>
</html>
First of all change the extension of all the pages from "html" to "shtml".
Create an HTML Page having your header.
And now what you can do it you can include your header into any shtml page by the following command
<!--#include virtual="Web/Controls/TopPanel.html" -->
The only thing which is the prerequisite is the SSI(Server Side Injection) should be supported by the server.
Client side page inclusion is only possible using AJAX. Look at jQuery for a simple AJAX library.
Example code (assuming jQuery is included):
$.ajax("includes/header.html").then(function(data) {
$('body').prepend(data);
});
This will insert the html in the includes/header.html at the top of the body element.
You could also insert stuff to the head. (replace 'body' with 'head')

Scrolling iframe on iOS is solved, BUT the iframe page display incomplete

I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
BUT, all solutions have an issue: the iframe page is not completely displayed...
I tested on my iphone and ipad, the iframe page displays choppy.
any idea?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
This solution is a bit of a hack, but is tested and works fine on iOS:
<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
</object>
</div>
Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)
You can easily determine the client OS and only add this code to iOS devices.
I found a combination of div with "absolute" style and nicescroll do fix choppines.
You have to load nicescroll on the page loaded by iframe.
In the same page wrap all you content with a div (with style absolute)
#content { position:absolute; }
Load nicescroll using wrapped div content.
$(document).ready(function() {
$("html").niceScroll("#content");
});
Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html
Automatically, with iOS native scroll has used, in other platform you got nicescroll active.
I have test on iPad with iOS 5.1.
Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.
In main page style:
iframe { -webkit-transform:translate3d(0,0,0); }
and in iframe style:
p { -webkit-transform:translate3d(0,0,0); }
I found this to be a problem with relatively positioned content inside the frame.
Get rid of this behavior when removing position: relative;

HTML - How do I make my SWF fullscreen?

I'm working on a project where I need to make a Flex application that fills the entire browser window (note that I mean that the toolbars should be visible and all that even if I say fullscreen).
To develop the SWF I'm using FlashDevelop (for the first time) and I'm stuck. When I build the project it displays no error and a file website.swf is generated. When I browse to this file with Firefox, it displays what I want and in fullscreen. However when I go to the generated index.html I get a white horizontal bar at the top of my screen (again the browser window).
I've looked around a bit on the internet and found several people suggesting that the CSS should include stuff like:
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
But that didn't cut it for me, I still have the white bar. I've tried margin, top, width, height and border so far, nothing seems to work.
Other tutorials show how to make an SWF fullscreen as in the Firefox F11 equivalent, which is not what I want (and it still displays the annoying white bar when I press F11 :().
EDIT: Additionally when I place an extra line above the "altContent" div that says "Blub", this line will be displayed in the white bar.
For completeness, the HTML, since I expect this to be the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"Website"
};
swfobject.embedSWF("Website.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
</head>
<body>
<div id="altContent">
<h1>Website</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
The HTML and CSS look fine. I've just tested it with Firefox 3.6 and Flash Player 10.1 as well as the latest version (2.2) of swfobject. The displayed SWF fills the browser window completly. There's no white bar on top of the SWF.
Try upgrading to the latest version of swfobject in case you are still using an older version.
BTW: You can remove the second line of your CSS. That's redundant.