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 am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
How in jquery do I get/set the title attribute of a bootstrap tooltip.
<span data-toggle="tooltip" title="a,b,c,d">Something</span>
... and ...
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('.CustomToolTip').each(function () {
alert($(this).attr('data-toggle'));
alert('[' + $(this).attr('title') + ']');
//$(this).attr('title', $(this).attr('title').replace(/,/g, ','));
});
});
and I have tried:
...
$('.CustomToolTip').on('show.bs.tooltip', function () ...
...which implies I am using the incorrect attribute or code!!??!!
In reference to Why doesn't break word work on a long string with commas? my eventual purpose is because my title has no spaces and can be quite long I need to append to the comma a non-whitespace space (char U+2008 in Unicode, or ​) (the line I have commented out). In reality the title is set in the VB.NET code-behind and is a asp.net Label control that gets rendered as a span tag and if I do a replace in the VB.NET code a funny character appears (well at least in IE) in the front-end. So I decided to do it in jQuery client side as other's have suggested however, my title attribute is blank (NB: the first alert box call shows value of "tooltip" the second is blank between the square brackets)!
For e.g. say my tooltip is a fruit list "apple,banana,cherry,date" and my max-width is a width of 11 characters then my tool tip is rendered as:
apple,banan
a,cherry,da
te
however; what I wont is:
apple,
banana,
cherry,date
i.e. it does not break in the middle of a word.
My css is:
.CustomToolTip + .tooltip.right > .tooltip-inner {
max-width: 400px;
background-color: #333333;
color: #bbbbbb;
word-wrap: break-word;
border-radius: 8px;
}
.CustomToolTip + .tooltip.right > .tooltip-arrow {
border-right-color: #333333;
}
Can someone please point my mistake out for me - thanks?
Get title Attribute
$('[data-toggle="tooltip"]').attr("title");
Set title Attribute
$('[data-toggle="tooltip"]').attr( "title", "New Value" );
For Reference: http://api.jquery.com/attr/
If your goal is just to convert white space, a trick is to convert them (server side) to
Or actually change the CSS of the tooltip popup.
As usual if you search hard enough you find what you are looking for. Credit goes to #yann-chabot changing the title of a popover with bootstrap and jquery and I found this useful site that is all about uni-code space characters as well https://www.cs.tut.fi/~jkorpela/chars/spaces.html.
The solution was to use the 'data-original-title' attribute and not the 'title' as follows :
...
var newTitle = $('.CustomToolTip').attr('data-original-title');
newTitle = newTitle.replace(/,/g, ',\u200A');
$('.CustomToolTip').attr('data-original-title', newTitle);
I decided to use Unicode 200A for the space character because it gave me less space!! I believe it is something to do with the font you are using and it is giving me in my case approximately 1 pixel of space after the comma, enough for the "word-wrap: break-word" css to work - hooray!
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
I've just upgraded from ST 2 Beta 3 to the Release Candidate that came out yesterday. I have a menu bar with buttons, so that when you tap them, a new card will be shown - just like a tabpanel. It worked before the upgrade, but now nothing is shown. It's like the show() method doesn't work any longer. If I look at the source code (inspect element in Chrome) i see that there is a class called x-item-hidden on the div and it has the inline style display: none; ... like this:
<div class="x-container x-panel x-item-hidden x-fullscreen" id="ext-panel-1" style="display: none !important; height: 100% !important; width: 100% !important; ">
When I remove "display: none !important;" the content is shown.
Has anyone seen this problem and how do i solve it?
Edit:
Sorry for not adding code, but didn't know which parts to add. However I've now narrowed the problem a bit down.
In my controller I have:
config: {
refs: {
calendarPanel: '#idCalendar',
...
}
Then I call this member function to hide its content:
hidePanels : function(){
this.getCalendarPanel().hide();
...
},
The this.getCalendarPanel().hide(); hides the panel as it's supposed to, but subsequent calls to this.getCalendarPanel().show(); does not show the panel again as it did in the last versions of ST2.