Like the title says, I am having issues with a VERY long string overflowing my page. I tried some overflow techniques, but none seem to work.
I had previously posted this as a Primefaces problem, but have since learned that it is not a Primefaces issue. Anyway, if anybody has any suggestions on how I can fix this, I would appreciate it. I will post my HTML below so you can see what I am talking about.
Thanks for taking the time to read, and have a great day. :-)
<!DOCTYPE html>
<html>
<head>
<title> overflow </title>
<style type="text/css">
#container{
width: 800px;
border: 1px solid #000;
background-color: #efefef;
}
div {
padding: 10px;
}
span.text {
}
</style>
</head>
<body>
<h3> overflow </h3>
<div id="container">
<table border="1">
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper justo vel felis blandit ut egestas nisi tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in est pulvinar orci pharetra fringilla in eget quam. Maecenas id ipsum eget arcu tempus varius eu sit amet neque. Praesent quis consectetur ligula. Nam bibendum, turpis nec dignissim euismod, arcu libero sodales sapien, ut scelerisque magna risus eu orci. Curabitur sit amet turpis at turpis adipiscing luctus nec id felis. Vestibulum luctus mauris quis ante dignissim rutrum. Fusce fermentum enim quis nisl volutpat consequat. Integer lacinia tempor nisi id aliquet. Praesent vitae semper ipsum. Curabitur mauris est, faucibus eu auctor a, egestas vitae nisi.
</div>
<div>
Donec fringilla laoreet leo, eu aliquet dolor mollis sed. Donec ligula turpis, vestibulum sed faucibus at, venenatis consequat turpis. Integer fringilla, ligula in consequat sodales, odio nunc vulputate nisi, non hendrerit dolor mauris sodales nulla. Nulla mattis iaculis nisi, quis lacinia massa dictum vitae. Fusce quis turpis neque, nec adipiscing tortor. Cras et nisi sem, at viverra lacus. Nam posuere odio non lacus facilisis condimentum. Ut ultricies, arcu eget tempus facilisis, urna dui commodo neque, a posuere libero mi ut nisl. Praesent ut semper lectus. Aenean id mauris nulla. Pellentesque dapibus congue varius. Ut id turpis consequat augue pellentesque egestas. Nunc feugiat bibendum tortor, sit amet fringilla enim viverra in. Mauris sit amet lorem eget enim ultrices euismod id eu velit. Duis eu vestibulum sapien.
</div>
<div>
Vivamus volutpat interdum tortor et luctus. Etiam laoreet congue nunc in congue. Nullam interdum mauris eros. Duis at turpis odio, in interdum odio. Aenean feugiat est at libero hendrerit quis laoreet purus egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sagittis scelerisque venenatis. Morbi tristique rutrum tortor at lobortis. Suspendisse suscipit purus vel massa laoreet vitae dapibus lorem imperdiet. Mauris consectetur arcu et diam iaculis et cursus leo ultrices. Nunc turpis nunc, interdum ac pretium id, facilisis quis libero.
</div>
<div>
Donec eget velit in nisl posuere porttitor ut at nisl. Phasellus eros tortor, pretium at sollicitudin pellentesque, feugiat a tortor. Integer blandit viverra odio, id iaculis odio fringilla ac. Nulla dignissim fermentum lorem ac scelerisque. Vivamus iaculis augue eu sapien porta convallis. Nam faucibus, diam nec condimentum dapibus, erat arcu vehicula nisi, sed vehicula ante ante convallis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam elit, mattis pretium venenatis nec, vehicula ut tellus. Phasellus commodo pretium purus, non viverra erat auctor sed. Ut dui nisl, pellentesque nec placerat non, sagittis condimentum nunc. Donec varius tincidunt est eu consequat. Etiam ac nulla ut nibh sagittis vulputate. Nullam egestas risus eu nunc tincidunt a ultricies libero posuere. Nulla facilisi. Maecenas sagittis est nec tellus sodales porttitor.
</div>
<div>
Nullam vulputate dui ac velit lobortis pellentesque eu a nisi. Maecenas vitae ligula dui, in imperdiet mi. Mauris commodo nisl eu eros sodales sed tempor leo auctor. Nam ornare varius arcu, at dictum ipsum volutpat nec. Aenean sagittis adipiscing hendrerit. Aenean at quam lacus. Donec malesuada bibendum vestibulum. Suspendisse lobortis pretium neque, vitae tempus felis interdum in. Aliquam sed metus in felis sodales interdum. Praesent malesuada nulla pretium arcu consectetur eu dictum lacus elementum. Ut dictum faucibus hendrerit.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> problem </title>
<style type="text/css">
.main
{
width:960px;
margin:0 auto;
overflow: scroll;
}
</style>
</head>
<body>
<h4> problem </h4>
<div class="main">
<table border="1">
<tr>
<td>
<span>cell</span>
</td>
<td>
<span> </span>
</td>
<td>
<span>cell</span>
</td>
<td>
<span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
</div>
</body>
</html>
use the word-wrap:break word css attribute & give it an explicit width:
span .text{
word-wrap:break-word;
width:800px;
}
This property will only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.
Related
Problem
I am working on a project in which I need to convert HTML to a PDF. I am doing this simply with the browsers print capabilities. The problem came when I added headers and footers to my document using the method described here.
In my document I am also using css columns, and for some reason, only when there is at least one full column AND less than one page of content being printed, it adds a blank page at the beginning and end of the document leaving me with 3 pages. This is not ideal as I am aiming to automate this process in the future and having extra blank pages with just the header and footer being printed is not acceptable.
I initially thought there must be some invisible margin causing the blank pages to be added, but as soon as it gets to more than one page of content the blank pages disappear and the output is as expected.
I am not proficient with CSS at all so if someone has any insight as to why this is happening, and preferably how I can solve it, I would be very grateful to hear it.
Here is the HTML and CSS which causes the extra blank pages when printed. To see how it reverts back to normal, just add more content to the page div so that it creates more than one page of content.
EDIT: To see the problem you'll have to run this code in the firefox browser since chrome doesn't support the column-fill property meaning the columns will be balanced and none of them will be filled.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
columns: 3;
column-fill: auto;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<!-- <div class="page">PAGE 1</div>
<div class="page">PAGE 2</div> -->
<div class="page" style="line-height: 1;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
<!-- fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum. -->
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
I have a row in my HTML Table which is overlapping my div in footer while printing it in A4 page.
How to fix it so it can break before footer and continue in the next page and so on.
I've googled and found many solution like this but all of theme didn't worked for me.
Margin while printing html page
My Style
<head>
<style>
#media print {
h1 {
page-break-after: always;
}
div.divFooter {
position: fixed;
bottom: 0;
}
.pagebreak {
page-break-before: always;
}
table {
height: 500px;
overflow-y: scroll;
}
}
p {
white-space: pre-line;
white-space: pre-wrap;
}
#main_table,#id_table{
border: 2px solid black;
border-collapse: collapse;
table-layout: fixed;
page-break-inside: auto;
width: 100%;
text-align:center;
margin-top:-18px;
}
</style>
</head>
My view
<body dir="rtl" style="margin-left: 0.98in;margin-right:0.98in">
<div>
<br>
<div>
<table id="main_table" dir="rtl" border="1">
<tr style="font-size: 20px;font-weight:bold;height:40px">
<td style="width: 47.5%">first column</td>
<td style="width: 7%">second column</td>
<td style="width: 47.5%">third column</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td style="vertical-align: top;border-top:hidden;height:60vh" dir="rtl">
<p style="font-size: 16px;margin-right:25px;margin-left:25px;text-indent: 30px;text-align:right" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
<br>
</td>
</tr>
</table>
</div>
<br>
<br>
<div class="divFooter" style="width:80%;padding:25">
<hr style="width: 98%;border-radius: 5px;border: 3px solid"/>
<p style="margin-right:25px;margin-left:25px;font-size:14px">sdfsdfsd fasdfh klhasdkjf sakdljfh askjfdhsakdjfh askjdfh a </p>
</div>
</body>
it Show look like this while printing it in A4 page
After searching a lot I found this link
https://plnkr.co/edit/lWk6Yd?preview
Very use full
Style
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
Body
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Im trying to develop html with sticky header and footer at all pages...
This Source Ultimate printable HTML layout with repeating header & footer on every page is best example i could find for actaully applicable but im facing a small issue with it
Im converting the HTML string to A4 Size paper for printing the document...
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
size: A4;
margin: 5 auto;
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
</style>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
if
.page-header, .page-header-space {
height: 210px;
}
its working perfect but if i give the height more than 210 / 220 px
for example
.page-header, .page-header-space {
height: 250px;
}
the content of the body is hidding behand the header...
what could be the possible solution to overcome the problem.
Example of the error from actual output
Output with 210px or Below
Output with 250px
Thank you for your precious time.
I trying to understand how browsers render table cells with width set to 100%. How they calculate the width of cells. We have the following example
<table style="width: 100%; color: black">
<tr>
<td>
AAAA
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
Output is weird
My question is why the first cell is that long (it contains only 4 letters of text and should end after last letter) while the second cells width should be as wide as possible.
I would expect something like that
As long as you don't set any width for the tds, the proportion between them is analog to the content. In your example, four letters in the first cell is infinite times more content than the second cell has (no text at all).
If you want to avoid that, define width settings for the tds - see the example below - once with your original code, once with added content in the first td
td {
width: 50%;
}
<table style="width: 100%; color: black">
<tr>
<td>
AAAA
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
td {
width: 50%;
}
<table style="width: 100%; color: black">
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
Jsfiddle: https://jsfiddle.net/2oev7nLa/
I have a page with fixed navbar and footer in place. The site works as intended in Chrome and Firefox but the scrolling bar will not show up on internet explorer when contents overflow (particularly with accordion expanding). I'm testing with IE 11 but I've been told the same issue happens in IE 10 as well. Visit the JSFiddle above with IE and expand the accordions to get a sense of what I mean.
The CSS that's causing the issue is the following
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
For some reason, IE is overriding my overflow-y settings and I can't find a solution for this.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="MasterPage.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/Content/scripts/Utility.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li>Home</li>
</ul>
</div>
</div>
</nav>
<!-- Wrap all page content here -->
<div id="wrap">
<div class="container">
<div class="page-header">
<h1>Tests</h1>
</div>
<p class="lead">Test</p>
<div id="collapsibleTable" class="table-responsive">
<table class="table table-striped table-hover table-bordered" style="border-collapse:collapse;">
<thead>
<tr>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#collapsible1" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="#Current.GameID" id="collapsible1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#collapsible2" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="#Current.GameID" id="collapsible2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">This is a test.</p>
</div>
</div>
</body>
</html>
CSS:
body {
margin-bottom: 60px;
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
position: fixed;
bottom: 0;
width: 100%;
}
.hiddenRow {
padding: 0 !important;
cursor: default !important;
}
.hiddenRow tbody tr td {
background-color: white !important;
cursor: default !important;
}
Your #wrap div is using a few things that combined are causing this bug. These are overflow-y: scroll and max-height, but also calc that sometimes behave weird on IE11.
The easiest solution is to use height: calc(100% - 120px) instead of max-height and that will solve the issue on IE11. Other workarounds include setting the element as position: relative but in your case, max-height still causes the issue.
Updated fiddle at https://jsfiddle.net/ct24m4q0/1/
problem in wrap id please replace the wrap style with the style given below
#wrap {
max-height: -moz-calc(100% - 120px);
max-height: -webkit-calc(100% - 120px);
height:450px;
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
Please check the example code here codepen