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>
Related
Case 1: Without initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
I open this page with Chrome on a desktop browser. Then I right click the page and select Inspect. Then I click the mobile icon in the inspector and select Galaxy S5 from the dropdown. I see this:
The same result is reproducible with Chrome on actual mobile phone. The <div> element is not as wide as the page.
Case 2: With initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Here is the output now. The page seems okay when it loads but as we scroll right, we see that the <div> is still not as wide as the entire width of the page.
Output in both cases remain the same even if I add width: 50% to the .header in the CSS.
Question
Why does this issue occur? How can I fix it such that the <div> element is really as wide as the page and the entire long word is visible to the right (it is okay if the user has to scroll right to see the long word)?
You are dealing with overflow here; the element the text is in doesn’t extend its width - so child elements inheriting this width, don’t become wider either.
Solution (or workaround, depending how you want to see it) is to force such long words to break, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
If you check the browser compatibility table further down that page, you’ll see that the value anywhere doesn’t have browser support yet, expect for Firefox 65+ - but for most cases, break-word should do.
(You can also check out the similar property https://developer.mozilla.org/en-US/docs/Web/CSS/word-break Sometimes a combination of both can lead to better results in older browsers.)
I have some text and would like to make it more narrow so it doesn't span right across the screen. I have typed:
<body style="margin:20">
<body>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
However it doesn't seem to be doing anything to the text. Do I need to close my body style tag? Is margin the correct operator to use? (I am a very beginner, this is literally the first time trying HTML)
The basic syntax of an HTML page is
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
There is only one body for HTML.
So use div, span, p tags within the body for wrapping your content.
<body style="margin:20"> is bad code
Try <body style="margin:20px"> or <body style="margin:1%">
body {
margin: 20px;
}
<div>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</div>
add css on your html,
<style>
body {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Without css just add style property on your body tag,
<body style="margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</body>
Remove second <body> tag
Add unit to margin (i.e. px)
<body style="margin:20px">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
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 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 want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera