Pretty straightforward problem. Have scroll-able ion-content in my Ionic4 application. I want to be able to print it gracefully by applying #media only print styles. I'm almost there, but I have one major problem. I cannot get the vertical scrollbar to disappear for printing. Additionally, I only ever get one page printed, containing only the content that is in view when I print the page. I've scoured the web for solutions, and come across and tried various suggestions in the context of Ionic3 and earlier, but I haven't found the magic bullet for Ionic4 yet. Has anyone encountered and gotten to the bottom of this yet?
I have been through the ringer on trying to print content in Ionic 4. Some of the steps i followed to print multiple pages.
remove any flex-box styled lists. They just will not print how you want them to across pages, though they have worked fine for me if the content fits in a page.
for items you want to be seperated by page, its best if they are a display: block; styled item, so that that in the print style sheet you can use one of the page-break properties on it
on the item containing your list, the ion-content for example, make sure you remove any max-height attributes from it or any of its ancestor or child elements, as well as removing the overflow: scroll from these elements as well so that it allows your content to go from page to page. for example on my stylesheet for printing (cant share it because of NDAs) I had a lot of overflow-y: visible on elements just to make sure it shows. if you find an element thats cutting off your html, it should be the primary target for experimentation.
you can simulate a print in the dev tools, i found it useful, it's good for iteration here's a link
some other things that may help, but i am not sure as I did so much testing across browsers, and only vaguely remember what impact that css property had is to have the body with a static position, as well as having contain: none on the body to say that the browser should render as normal, little more explanation here
i do not know the specifics of your use case, but if you don't mind foregoing the native print button, and just giving the user a button to click to trigger the print, then that would be more manageable as you do not have to account for all the scaffolding around that specific element that you want to print (the ion-router, ion-page, and all the ancestors)
If you did that then you could put all your items you want to print into a div with an id of printSection or what you prefer, and then the javascript that is responsible for that page you can create your own print function. In my example i will use angular, if you are not using that then preform whatever DOM selecting you need to to get the native html out of your template.
#Component({ ... })
export class Page {
// select the item holding your print content by `#property` you gave it
#ViewChild('printSection', { read: ElementRef }) printSection: ElementRef;
...
customPrint() {
const printContent = this.printSection.nativeElement;
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML); // pass in the native html you got
/**
* you should probably use an observable instead of an interval for this,
* but this is just to illustrate a bug where the print would be fired before
* all the content was written
*/
const interval = setInterval(
() => {
if (document.readyState === 'complete') {
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
clearInterval(interval);
}
},
200);
}
}
I Solved it following this process
First, remove the content to be printed from ion-content. Use a div instead of ion-content(shadow-dom is implemented with ion-content which blocks your CSS classes)
You also need to force the CSS below on ion-page when printing (it is initially set to position: absolute, by default)
In my case I was printing from a modal component which has a default class "show-modal". I was able to print on multiple pages by target that class this way
#media print {
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
position: relative;
flex-direction: column;
justify-content: space-between;
contain: none;
overflow: visible;
z-index: 0;
}
.scroll-content,
ion-modal.show-modal,
ion-modal.show-modal .modal-wrapper,
ion-modal.show-modal .ion-page.show-modal,
ion-modal.show-modal .ion-page.show-modal > ion-content,
.ion-page.show-modal,
.ion-page.show-modal > ion-content,
ion-tab,
ion-tabs,
.app-root,
body {
contain: none;
position: relative !important;
height: auto;
overflow: visible;
}
}
I'm also trying to solve this same issue. I've scoured the Internet, and tried many an idea, but none has worked so far.
Perhaps we could solve this collaboratively. I'd put this as a comment, but I don't have enough rating points, so the system will not let me.
This is what I've found so far. In Chrome Developer Tools, you can click on a settings icon, then scroll to "Rendering," and on "Emulate CSS media type," select "print."
When I do that, it shows what the print view is. I created a separate css file, let's call it print.css, and in it, there is
#media print {
/* add your css styles for print here */
}
I know my print.css is being processed because I've
display: none
for ion-header and some tabs at the bottom, and they do disappear when I select "print" emulation in Chrome.
What is interesting is, I'm seeing the whole page -- scrollable and all -- on the screen in this print mode. However, every time I try to print it, only one page shows up.
That page, however, doesn't always start at the top. It includes the current viewport.
Which is why, I'm wondering if there is something in the css that is trying to keep the whole thing as a page. i.e., preventing a page break?
I'm experimenting with things like this:
ion-content, .foo, .bar, ion-list, ion-tabs, ion-item {
break-inside : auto !important;
break-after : auto !important;
break-before : auto !important;
}
(where foo and bar are classes you might have of your own.)
This above one breaks things. Removing ion-tabs, ion-list, and ion-item shows the full page.
I'm also experimenting with the following. None has worked so far, but that is probably because I haven't selected the right tag or class.
display: block !important;
height: 100%;
overflow-y: visible !important;
max-height: unset !important;
contain: none;
You may want to experiment with the tag in question that might be preventing a page break. Some people are suggesting it's flexbox or grid that's the root cause. I'd love to know how to find the root cause.
Good luck! If something works, let us know, so I'll also try it in my code.
I'm currently creating my first PWA with Stencil, PWA Toolkit and Ionic 4.
I can not explain myself a behavior when switching from one page (ion-content) to another page.
Here the situation:
CSS 1st page (app-home):
ion-content {
--background: pink;
}
CSS 2nd page (app-data):
ion-content {
--background: white;
}
With the statement:
this.router.push ('/data', 'forward');
the app changes from page 1 to page 2. But the background remains pink and does not change as expected to white.
When I refresh the url “/data” the background becomes white. When I then return to the first page the background
remains white.
What am I doing wrong?
It works this way because there are no css scoping in Stencil by default so rule for the for ion-content selector is applied twice in your page.
You need to prepend each style with a component selector to correctly scope them.
For example:
app-home ion-content {
--background: pink;
}
Read more about styling in Stencil here
I am working with a project which is based on web form with vb.net,I used telerik radgrid for data binding.
I placed RenderMode="Auto" into radgrid.
When run on desktop, it working properly.
But when run on mobile device,grid not showing.
I want to allow multiselect row option for mobile as well as desktop.
So I add rendermode for working on both desktop and mobile.
Also I have follow the rule https://www.telerik.com/forums/rendermode=-auto.
Please suggest me the What I am going wrong.
What you can do is to set the RenderMode property to Lightweight (this mode also works properly on mobile) and to enable the checkbox column (<telerik:GridClientSelectColumn>) which will allow you to select multiple rows both on mobile and desktop as shown in the following demo:
https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/selecting/row-selection/defaultcs.aspx
As a hint, you can increase the checkbox size with the following CSS class:
Checkbox size in HTML/CSS
#supports (zoom:2) {
input[type="radio"], input[type=checkbox]{
zoom: 2;
}
}
#supports not (zoom:2) {
input[type="radio"], input[type=checkbox]{
transform: scale(2);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
}
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.
i would like to ask how can i split my blogger header into two columns? Can you help me please? I'm having a hard time figuring out...
btw, i just need to add my logo at the left then google adsense on the right.
Thanks!
first you need to configure your blogger header max widgets. Check it if its more than 2. if not change it to (let's say) 4 and add the following css attributes under the #header & #header2:
float:left;
width:50%;
You'll be able to add new gadgets which is aligned horizontally. then add google adsense on the right and your logo at the left. Save your template and view!
Login to Blogger.com
Click on the "Template" section.
Click on "Jump to Widget"
Click on "Header1"
Under the code it jumps to, ie:
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Bog Tittle (Header)' type='Header'>
</b:widget>
</b:section>
Insert this code:
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
Now search for and find: "/b:skin"
ABOVE "/b:skin" insert this code:
#header {
float:left;
width:50%;
}
#header2 {
float:right;
width:30%;
}
You can adjust the percentages based on what you desire.
On the layout page, after you save the template AND REFRESH, you should see an "Add a Gadget" area to the right of your logo, where you can insert your adsense widget.
If things don't look right on the Layout page, place these codes below the other ones:
#layout #header, #layout #header2 {
padding: 0px !important;
margin: 0px !important;
width: 50% !important;
}
Remember to save your template and also remember to click REFRESH after you save your template.