Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest will support it very easily but still it isn't. I Tried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.
It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.
So the current answer to this question is:
There is no adequate solution for this in Chrome.
Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.
small test file:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
#media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>
further resources might be found here:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
test page:
http://www.andypemberton.com/sandbox/watermark/
HTH.
Kind regards, mtness.
Edit: Apparently the bug has been fixed, so the library I share below may not be of much use anymore.
From all of my research, it is correct that there is no way to get position: fixed to work in Chrome. Here is a link to the bug on the Chromium project page.
In the meantime, I have created this open-source project that allows you to print headers and footers in Chrome. It is early in development but it works, depending on the structure of your HTML layout:
It is a work-in-progress, and it relies heavily on the CSS Regions Polyfill. But I am using the techniques in this library to very good effect on a project at work.
I accomplished that using tables, but only for headers in chrome. I placed the repeating content on thead tag and the page content in tbody, so the browser interpreted correct.
However, I have encountered a bug in large contents HTML. In some cases, the content overlapped the header. In the date that I'm posting this, still not found a solution.
When printing tables in Google Chrome, content overlaps header
thead.report-header {
display: table-header-group;
}
tfoot.report_footer_Mh {
display:table-footer-group;
}
tabel.report-container {
page-break-after: always;
}
<table class="report-container" cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
<!-- place the header part here-->
<thead class="report_header_Mh">
<tr>
<th class="report_header_cell_Mh">
<div class="header_info_Mh">
</div>
</th>
</tr>
</thead>
<!-- Header Ends here-->
<!-- Place the Main Content here-->
<tbody class="report_content_Mh">
<tr>
<td class="report_content-cell_Mh">
<div class="main_Mh">
</div>
</td>
</tr>
</tbody>
<!-- Main Content ends here-->
<!--Place Footer content here-->
<tfoot class="report_footer_Mh">
<tr>
<td class="report_footer-cell_Mh">
<div class="footer_info_Mh">
</div>
</td>
</tr>
</tfoot>
<!-- Footer Ends here-->
</table>
It worked for me try this way
This is the code i use. Note I am setting both html and body height to 100%.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Related
I am building a web app using Bootstrap 4 and running into some weird issues. I want to utilize Bootstrap's table-responsive class to allow horizontal scrolling of the tables on mobile devices. On desktop devices the table should take up 100% of the containing DIV's width.
As soon as I apply the .table-responsive class to my table, the table shrinks horizontally and no longer takes up 100% of the width. Any ideas?
Here is my markup:
<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
<title></title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="application-name" content="">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive" id="Queue">
<thead>
<tr>
<th><span span="sr-only">Priority</span></th>
<th>Origin</th>
<th>Destination</th>
<th>Mode</th>
<th>Date</th>
<th><span span="sr-only">Action</span></th>
</tr>
</thead>
<tbody>
<tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
<td>0</td>
<td>PHOENIX, AZ</td>
<td>SAN DIEGO, CA</td>
<td>DRIVING</td>
<td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
<td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
</tr>
<tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
<td colspan="6" class="no-padding"></td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/bundle.min.js"></script>
</body>
</html>
If I apply a 100% width to the .table-responsive class, it makes the table itself a 100% wide but the child elements (TBODY, TR, etc.) are still narrow.
The following WON'T WORK. It causes another issue. It will now do the 100% width but it won't be responsive on smaller devices:
.table-responsive {
display: table;
}
All these answers introduced another problem by recommending display: table;. The only solution as of right now is to use it as a wrapper:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
This solution worked for me:
just add another class into your table element:
w-100 d-block d-md-table
so it would be :
<table class="table table-responsive w-100 d-block d-md-table">
for bootstrap 4 w-100 set the width to 100% d-block (display: block) and d-md-table (display: table on min-width: 576px)
Bootstrap 4 display docs
If you're using V4.1, and according to their docs, don't assign .table-responsive directly to the table. The table should be .table and if you want it to be horizontally scrollable (responsive) add it inside a .table-responsive container (a <div>, for instance).
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
doing that, no extra css is needed.
In the OP's code, .table-responsive can be used alongside with the .col-md-12 on the outside .
None of these answers are working (date today 9th Dec 2018). The correct resolution here is to add .table-responsive-sm to your table:
<table class='table table-responsive-sm'>
[Your table]
</table>
This applies the responsiveness aspect only to the SM view (mobile). So in mobile view you get the scrolling as desired and in larger views the table is not responsive and thus displayed full width, as desired.
Docs: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Create responsive tables by wrapping any .table with
.table-responsive{-sm|-md|-lg|-xl}, making the table scroll
horizontally at each max-width breakpoint of up to (but not including)
576px, 768px, 992px, and 1120px, respectively.
just wrap table with .table-responsive{-sm|-md|-lg|-xl}
for example
<div class="table-responsive-md">
<table class="table">
</table>
</div>
bootstrap 4 tables
For some reason the responsive table in particular doesn't behave as it should. You can patch it by getting rid of display:block;
.table-responsive {
display: table;
}
I may file a bug report.
Edit:
It is an existing bug.
The solution compliant with the v4 of the framework is to set the proper breakpoint. Rather than using .table-responsive, you should be able to use .table-responsive-sm (to be just responsive on small devices)
You can use any of the available endpoints: table-responsive{-sm|-md|-lg|-xl}
That's because the .table-responsive class adds the property display: block to your element which changes it from the previous display: table.
Override this property back to display: table in your own stylesheet
.table-responsive {
display: table;
}
Note: make sure this style executes after your bootstrap code for it to override.
It's caused by the table-responsive class giving the table a property of display:block, which is strange because this overwrites the table classes original display:table and is why the table shrinks when you add table-responsive.
Most likely its down to bootstrap 4 still being in dev. You are safe to overwrite this property with your own class that sets display:table and it won't effect the responsiveness of the table.
e.g.
.table-responsive-fix{
display:table;
}
Taking in consideration the other answers I would do something like this, thanks!
.table-responsive {
#include media-breakpoint-up(md) {
display: table;
}
}
I found that using the recommended table-responsive class in a wrapper still causes responsive tables to (surprisingly) shrink horizontally:
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
The solution for me was to create the following media breakpoints and classes to prevent it:
.table-xs {
width:544px;
}
.table-sm {
width: 576px;
}
.table-md {
width: 768px;
}
.table-lg {
width: 992px;
}
.table-xl {
width: 1200px;
}
/* Small devices (landscape phones, 544px and up) */
#media (min-width: 576px) {
.table-sm {
width: 100%;
}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
#media (min-width: 768px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
}
/* Large devices (desktops, 992px and up) */
#media (min-width: 992px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
.table-lg {
width: 100%;
}
}
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
.table-lg {
width: 100%;
}
.table-xl {
width: 100%;
}
}
Then I can add the appropriate class to my table element. For example:
<div class="table-responsive-lg">
<table class="table table-lg">
...
</table>
</div>
Here the wrapper sets the width to 100% for large and greater per Bootstrap. With the table-lg class applied to the table element, the table width is set also set to 100% for large and greater, but set to 992px for medium and smaller. The classes table-xs, table-sm, table-md, and table-xl work the same way.
Not sure if helps, but wrap your table responsive in a div and add .responsive-table class to both:
table.table-responsive{
display: block;
overflow: scroll;
}
.table-responsive {
overflow: hidden;
padding: 0px;
margin: 0px;
table-layout: fixed;
width: 100%;
display: table;
}
This gives a 100% expanded surrounding div which scales with the column width, whilst then making the actual table scrollable. The solutions above wouldn't work if I had a side column on the page, as they assume 100% width.
For Bootstrap 4.x use display utilities:
w-100 d-print-block d-print-table
Usage:
<table class="table w-100 d-print-block d-print-table">
It seems as though the "sr-only" element and its styles inside of the table are what's causing this bug. At least I had the same issue and after months of banging our head against the wall that's what we determined the cause was, though I still don't understand why. Adding left:0 to the "sr-only" styles fixed it.
Problem:
I am currently creating a webpage layout using divs and css rather than an HTML table layout. I want, of course, for this to be able to operate across all major browsers.
I have a pane for a banner, which has a floated menu over the left portion of it. The problem is that if the banner is too wide for the space provided, it jumps to a space below the menu (where it is wider) and takes all of the pages content with it.
Attempted solutions:
The obvious solution is to use the "overflow: hidden" property in my css. The problem is that this doesn't work in IE. I read that this is because I have it positioned relatively (which is true), but I don't see any way around using relative positioning in this case. I must keep it.
I also read that you could set the width of the pane to something besides the default, and then the "overflow: hidden" property would take effect. This DOES solve the problem in IE (setting width to 100%), but creates a problem in chrome (and potentially other browsers as well) where the alloted space for the banner is too wide for the page, and then chrome behaves the same way IE had originally - pushing the banner to the bottom of the page. This workaround could work, but I would need to define the width value as "100% - menuWidth" since there is a menu over the left side. I tried this:
style="width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth-(Menu Width goes here)+'px' : body.clientWidth-(And here too)+'px');"
But using the expression doesn't appear to enable the "overflow" property, even though directly setting the width a simple value does.
EDIT: At request I have attached my code.
HTML:
<div id="ControlPanel" runat="server" class="contentpane" align="center"></div>
<div id="Link" runat="server" align="right" onclick="location.href='address.html';"></div>
<div id="Header" runat="server" class="header" align="right"></div>
<div id="Links" runat="server" class="header" align="center">LINKS</div>
<div id="Search" runat="server" class="skingradient" align="right">[SEARCH]</div>
<div id="LeftPane" runat="server" class="leftpane" align="left">[USER]</br>LEFT</div>
<div id="TopPane" runat="server" class="toppane" align="left"><img src="image.jpg" alt="" /></div>
<div id="RightPane" runat="server" class="rightpane" align="center">RIGHT</div>
<div id="ContentPane" runat="server" class="contentpane" align="center">CONTENT</div>
<div></div>
<div id="BottomPane" runat="server" class="bottompane" align="center">BOTTOM</div>
<div id="Footer" runat="server" class="skingradient" align="center">[COPYRIGHT]</div>
</body>
</html>
CSS:
#Search
{
position: relative;
top: -20;
background-color: transparent;
z-index: 1;
}
#Header
{
height: 77px;
background-color: #0860A8;
background-image: url(ImagePath.gif);
background-position: right;
background-repeat: no-repeat;
border-bottom: 1 solid white;
}
#Links
{
background-color: #E6E6E6;
}
#TopPane
{
border-top: 1 solid #0860A8;
position: relative;
top: -20;
overflow: hidden;
}
#LeftPane
{
float: left;
position: relative;
top: -20;
width: 200px;
height: 100%;
background-color: #E6E6E6;
border-right: 1 solid #0860A8;
}
#ContentPane
{
position: relative;
top: -20;
width: 100%;
height: 100%;
background-color: Green;
z-index: -1;
}
#RightPane
{
z-index: 0;
position: relative;
top: -20;
height: 100%;
float: right;
width: auto;
background-color: Red;
max-width: 40%;
width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth*2/5+'px' : body.clientWidth*2/5+'px');
}
The color coding is to allow for easy previewing and editing of the site.
Make sure your file begins with a doctype, for one. It goes a long way toward making browsers act alike.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
I eventually hacked a solution that implemented slightly different styling for IE browsers.
IE has something called conditional comments, and has a 'comment' tag. Neither of these are recognized by other browsers, and are both simply passed over. The conditional comments take the following form:
<!--[if IE]> DO THIS <![endif]-->
Since it has the same structure as a typical comment (<!-- Commented code -->) it is passed over by all browsers besides IE, which apparently parses all comments looking for certain statements.
The comment tag:
<comment> HTML comment </comment>
This is recognized as a comment by IE, and is passed over, but other browsers just skip the unrecognized <comment> tag and process the line of code contained inside normally.
So my solution to this problem then since I could get IE to work one way, and other browsers another, was to place the HTML solution inside conditional comments:
<!--[if IE]><div id="TopPane" runat="server" class="toppane" align="left" style="width: 100%; overflow:hidden;"><img src="i5Banner.jpg" alt="" /></div><![endif]-->
and the solution for the remaining browsers inside the HTML 'comment' tags:
<comment><div id="TopPane" runat="server" class="toppane" align="left"><img src="i5Banner.jpg" alt="" /></div></comment>
This way I could treat IE browsers separately from other browsers. It may look ugly, but IE has apparently supported it through all IE versions and it causes no harm when encountered by other browsers, so I think I can consider it a safe and stable solution if nothing else is available.
I believe that this may offer a way around many of IE's other problems and idiosyncrasies.
If you wrap this floated element, and the others, in another (non-floated) div, and set the overflow property on that, it should work:
HTML:
<div id="wrapper">
<div id="the_problem_div">
</div>
</div>
CSS:
#wrapper {
overflow: hidden;
}
I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.
My HTML looks like this
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
and my CSS is basically like so:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
}
.WOHeader
{
display: block;
page-break-inside: avoid;
}
.WOPageBreak
{
height: 1px;
width: 100%;
float: left;
page-break-after: always;
display: block;
}
EDIT
In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-heihgt: 9in
}
short answer. You can't it's not consistetly supported across all browsers. there is slightly better support for page-break-before than page-break-after though...
see page-break-before compatibility and page-break-after compatibility
you could also try embedding a Ctrl-L in the page at those points thought I'm pretty sure a lot of printer drivers are gonna ignore that.
By setting the min-height in the WOPrint CSS class I'm able to fake an approximate page break for a standard height page:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-height: 9in;
}
All you need is
.WOPageBreak
{
page-break-before: always;
}
However, you'll also want to add "overflow:visible" to the body tag because without it Firefox will only print the first page.
You may also get more consistent results if you set margin:0 on the body when printing, like so:
#media print{body{margin:0}}
I found many answers to this question on Google, but none of them seem to work for all browsers.
I am looking for a CSS-only way to get min-width working on Firefox, IE6, IE7, and IE8. It is well-known that IE does not support min-width, so several hacks are out there to try to emulate the behavior of min-width. Unfortunately, I have not had any luck with them.
Specifically, this is what I'm trying to do:
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.</td>
<td>Link</td>
</tr>
</table>
Does anyone have a way to get this to work?
So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.
All I had to do was add CSS for a div within the largeCell and add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
table.dataTable td.largeCell div {
margin: 0px 0px 0px 0px;
height: 1px;
width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.
<div></div>
</td>
<td>Link</td>
</tr>
</table>
I use:
min-width: 200px;
_width: 200px; /* IE6 */
min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');
By default the Document mode in IE will be Quirks mode
Solution:
add the doctype on top of your html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
After so many hack that i have tried none of them works for me for this "min-width" issue, but finally i got its solution for IE 8.
Try to use this: <!DOCTYPE html> as your DOC type, this is HTML 5 DOC Type that turns your IE8 page to behave like mozilla or webkit browser.
So apart for min-width and min-height issue, it solves many IE8 problems very easily.
If my post helps you please mail me with your name thats it works for you.
Try adding:
overflow: visible
to the element
I was having a similar issue, I needed a site to be 95% unless it was less than 980px.
Nothing here worked, and in desperation I reached out to Bill Burlington's expression answer. The one mentioned above didn't work for me, but if I used a more robust expression it did!
width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );
This basically says if the width is less than 980px, set the width to 980px. If it's wider, set the width to 95%.
<style type="text/css">
.table1 th a {
display:inline-block;
width:200px";
}
</style>
<table>
<tr>
<th><a>title1</a></th>
<th><a>title2</a></th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
I want a set of <td>s to float left in IE7. They should break onto the next line if the window is too small.
CSS
table {
width: 100%;
}
td {
border: 1px solid red;
}
tr.f td {
width: 500px;
float: left;
}
HTML:
<table>
<tr class="f">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
This works in IE8 and Firefox, but not in IE7. What am I doing wrong?
Page rendering mode is "IE7 (Quirks)" or "IE7 (Standards)". I'm trying with IE8, though, trusting that IE7 rendering mode is what it says. "IE8 Compatibility View" is failing as well, only "IE8 Standards" gets it right.
I don't think this is possible the way you want.
When you apply the float to td elements [in FF/IE8[ they become anonymous table objects as per the CSS 2.1 spec. Essentially, they're no longer table cells, and these anonymous objects have a display type that is floatable.
IE7 doesn't follow this part of the spec, in fact, the display type of the cells cannot be altered at all, and objects with a display type of table-cell can't be floated.
If you absolutely need to use a table (instead of a ul/li) could you do something like this instead?
<style type="text/css" media="screen">`
table {
width: 100%;
}
.f {
border: 1px solid red;
float: left;
height: 10px;
width: 500px;
}
</style>
<table summary="yes">
<tr><td>
<span class="f">1</span>
<span class="f">2</span>
<span class="f">3</span>
</td></tr>
</table>
My best guess: IE7 and below have stricter table models and don't allow you to change the flow of table elements.