Page break in DataList (asp.net) in Google Chrome - html

I have created a Page with the Datalist control in it, which generates "ID cards".
You can see the working example here.
The problem is that I want to break the page after every 4th row of Datalist.
So to execute this, I am using this jQuery code:
<script type="text/javascript">
$(document).ready(function () {
$("#GridView1 tr:nth-child(4n+0)").addClass("breakpage");
})
</script>
And the CSS class:
<style type="text/css">
.breakpage {
page-break-after: always;
}
</style>
So if you open the page and check with the inspect element, you can see that the jQuery is working, and it does add the class on every 4th row.
But still, when I try to take a print, the page break is not working in Google Chrome (working fine in firefox).
Could someone please explain what is wrong with the code?
Thank you.

How to achieve page break in HTML table for Google Chrome? can you see if this page helps? It might have something to do with a tr being display: table-row instead of display: block
Apparently Chrome only applies the page break to block level elements.
Edit: I've just tested that setting the following fixes it:
#GridView1 > tbody > tr {
display: block;
}
If I shrunk the margins of the pages the pagebreak didn't fall on the next page, but playing around with the sizes of your cards would fix this too so you don't have a fully empty page

Try it in CSS with this:
#GridView1 tr:nth-of-type(4n) {
page-break-after:always;
}

Related

Google Chrome (v.51) not applying print media css

I know there's a lot of questions about this, but I tried everything and nothing seems to work. I followed these links:
Splitting HTML page so Printer splits it into separate pages
Chrome: Print preview differs from simulate CSS media print
Print media queries being ignored in Chrome?
Google Chrome Printing Page Breaks
and much more.
I tried pretty much every single suggestion in all of them.
Here's what I've got so far :
html
<link href="path/styles/print.css" rel="stylesheet" media="print">
<div class="page-break">
//some stuff
</div>
css
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always;}
}
In IE and FF, I can't see preview of the page I'll print, but when I do print, it works just fine. In chrome, I can see preview, but it's never right... next I'm trying to save it as pdf, but it still doesn't apply print css.
*Saving as pdf as nothing to do with trying to make it works... it's just to save paper
Now, before you post an answer, please be aware of the following :
I tried this:
!important; hack
Deleting css page and put css directly in html page
Delete media all
Delete media all and changing display block to none
Tried page-break-inside: avoid;
*{transition:none !important;}
.page-break { ... transition: none !important;}
put it in main style sheet
float: none !important;
position: relative; position: static;
display: block; display: inline;
box-sizing: content-box;
-webkit-region-break-inside: avoid;
I didn't try with other version of Chrome. I tried on v.50, after multiple attempt fail, I updated to v.51. Some said it works on v.38 or something like that... I won't downgrade to that version.
Edit: I forgot to mention that my html code is in a jsp page. So the <div class="page-break"> is in a for-loop. Every loop has to be on individual page.
Edit 2: I created a jsfiddle. I pasted the source code I have and it works perfectly. So I removed the css stylesheet that are links in my page. But even by doing that, it won't work. So if it's override somewhere, it's not there.
The page is a JSP page, does it have anything to do about it? If not I'm clueless, because in the same project, on the page I want to print, I added a button that redirect to a page.html and I created 3 divs with the same class name and it works just fine.
So! I'm here to answer my own question, in case someone just can't make it work just like me.
I tried to give a new approach to my problem, since I can't print single div per page and I don't know why, I must find another way. But it's not that I didn't know how it works... I created a JSFiddle and it worked. In my own project, I created a html page and it worked. But since I was in JSP, maybe it was messing with my code somewhere.. I have no idea.
So here's what I've done.
function getStuffToPrint(data){
var html = "", index, len;
for (index = 0, len = data.length; index < len; ++index) {
html += "<div class=\"custom-page-break\">" + data[index].innerHTML + "</div>";
}
var mywindow = window.open();
mywindow.document.write('<html><head>');
mywindow.document.write('<link href="my/path/to/styles/print.css" rel="stylesheet" type="text/css"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(html);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
In my case, data was an objectHTMLCollection : document.getElementsByClassName("custom-page-break")
It's a bit ratchet, I had to write the div with the class name again...
Here's my css, it may work without display: block and page-break-inside, I didn't even try.
#media print {
.custom-page-break {
display: block !important;
page-break-before: always !important;
page-break-inside: avoid !important;
}
}
Hope it'll save hours for some people.
Have you tried to put the print.css in your main style css document ? I had a similar case and it solved my problem.
You dont have to make a pdf file every time to see if the #media print worked, you can see the page emulated like print in your Google developpement tool on Chrome:
To see that option, do : F12 -> show console -> rendering ( it's a tab of the console ) -> check "Emulate media Print".

Button inside an iframe is not working

I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick

Active state and display:none causes link not to work

Consider the following fiddle: http://jsfiddle.net/GMA76/
On the links active state I want to replace the content of the a tag, then it should continue to follow the link. However when I style it as shown in the fiddle and here:
a div:first-child{
display:block;
}
a div:last-child{
display:none;
}
a:active div:first-child{
display:none;
}
a:active div:last-child{
display:block;
}
The link doesn't work the first time you click it. It only replaces the content and then it seems the redirection fails.
How would I fix that?
Browsers don't take well to content changing on the :active event. Even if it did work, a CSS-only solution would likely mean that the user wouldn't even see the change in content before the new page had loaded (or started to load with a white screen). I tested a lot with the :after pseudo-selector and the content property, but this didn't work either.
And rightly so. Changes to content should only be done with a language like Javascript. This is a logic issue and is outside of the scope of a styling language. Therefore, I would suggest using Javascript.
I've created a quick fiddle here using Javascript with jQuery (doesn't need jQuery it but it's easier) to switch the text in the link and then go to the new page exactly 1 second afterwards. This way you only need to have the original link in the HTML rather than hiding separate links with CSS. There are more flexible and extensible ways to do this if it's not just for one or two links but for the sake of an example, take a look at the fiddle.
This is the jQuery:
$(".switch-link").click(function(){
$(this).text("Test Two");
var href = $(this).attr('href');
setTimeout(function(){
window.location = href
}, 1000);
return false;
});
1000 is the delay between the text changing and the browser starting to load the new page, you can change this to suit your needs.

Firefox won't print iframe styled with display:none

I'm using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:
<div id="printerDiv" style="display:none"></div>
Is this expected behavior? All other browsers print, I'm thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it's always visible in some way. I'm currently using the below CSS to make the iframe invisible:
#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}
But it's margins still exist and leave a 14px gap once the iframe is generated.
Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a hack like that?
I even tried using CSS to set the iframe to display:block #print media types and display:none for screen, the JS function still won't print.
If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.
#printerDiv iframe{
position: absolute;
top: -1000px;
}
I had exactly the same problem. When the display attribute is set to none, Firefox returns 0 for $('#printerDiv').css('height'), $('#printerDiv')[0].style.height or when outerHeight() or outerWidth() are called on the element.
I used z-index for this which does not bind you to use position:absolute.
So, you could have this in the css file:
#printerDiv { z-index: -10; }
Then, when you want to make it visible, just set the z-index using a jquery css() call.
If you control the content of the iframe, make it print itself:
<script type="text/javascript">
window.print()
</script>

Help with using CSS id/class id's within MVC3

Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.