In LWC, I have hidden a div tag but I want it to be displayed when I call a window.print() which is not happening. is there any simpler way to print this on a window.print() call ?
The defined div element in lwc
You can do something like this with CSS:
/* main.css */
.custom-print-css-class {
display:none;
}
/* override styles when printing */
#media print {
.custom-print-css-class {
display:block;
}
}
The #media print CSS will only show up when printed.
Related
In my project using React with Typescript I am trying to print a div with some data.
Basicaly This div is in a modal, I gave it an id (id='printablediv'). Then when you press print on the modal I run this function :
const Print = () => {
let printContents = document.getElementById('printablediv')?.innerHTML!;
let originalContents = document.body.innerHTML;
document!.body!.innerHTML! = printContents;
window.print();
document.body.innerHTML = originalContents;
setIsModalOpen(false)
}
Then problem is that when I click print and the print page opens and I print the div, after that the page freezes. and I cant do anything. I have to reload the page. Even if i don't print and press cancel, it still freezes. Has anyone encountered with problem?
I am trying not to use a library such as react-to-print.
Edit:
This is where i call the Print function:
<TicketModal
isOpen={isTicketModalOpen}
onAnulla={onCloseTicketModal}
onPrint={Print}
code={createResponseCode}
pin={createResponsePin}
id={user.uid}
currency={createResponseCurrency}
amount={createResponseAmount}
/>
the onPrint is the prop connected to the modal button
<Button size="lg"
variant="primary"
className='ticket-modal-card__button'
onClick={onPrint}
>
Print Ticket</Button>
I found the solution.
Apparently the problem is I'm removing the original content, and then replacing it with new, different content, so all the event listeners and metadata react had attached to the original content is lost. innerHTML doesn't include those things (setting innerHTML is probably never what you actually want to do in any situation).
To print just part of a page, I set up a print stylesheet that changes the styling of your page when printing, and not change the HTML itself.
.printme {
display: none;
}
#media print {
.no-printme {
display: none;
}
.printme {
display: block;
}
}
This way I can Display and hide everything I want and print only the part I need.
I am new to PrimeNg with Angular. I have a simple primeng p-inputnumber component as below:
<p-inputNumber
[showButtons]="true"
[placeholder]="placeholderText"
incrementButtonIcon="fal fa-plus"
decrementButtonIcon="fal fa-minus"
[minFractionDigits]="_config?.integer ? 0 : 1"
[min]="_config?.minValue"
[max]="_config?.maxValue"
[(ngModel)]="value"
(onBlur)="onBlur()">
</p-inputNumber>
And have created a wrapper to this component i.e is the wrapper to the above component and using it in a homepage component. Now i want to apply style to this wrapper component which in turn should apply style to primeng component. Right now it is not setting.
Homepagecomponent.html
---<app-number-input class="disabled">
------<p-inputNumber>
i set the below style in homepagecomponent.scss
:host ::ng-deep .disabled {
background: red;
}
But the above is not being set. Can anyone help me how to achieve my expected?
Thanks
You would need something like this in your CSS
:host ::ng-deep {
// you may want to specify your app element or something here to be more specific than just .disabled class
.disabled {
// tweak this list to whichever pieces of the p-inputnumber you want to have red background
.p-inputnumber,
.p-inputnumber-stacked,
.p-inputnumber-horizontal,
.p-inputnumber-vertical,
.p-inputnumber-input,
.p-inputnumber-button,
.p-inputnumber-button-up,
.p-inputnumber-button-down,
.p-inputnumber-button-icon {
background-color: red;
}
}
}
I am using the ngToast to display the success messages in angularJs, but success message is displaying behind the modal popup.
How can I display the ngToast message on top of the Modal Popup?
Add the following to your CSS:
toast {
z-index: 7000;
}
Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal.
Try This
#toast-container {
z-index: 9999999;
}
Check the z-index of your modal by inspecting modal element( eg: if it is 1050). add any value above this index to your toast will work
toast {
z-index: 1051
}
EDITED:
I've found the solution.
In my case I had to use a huge number for z-index, but also I had to use in other css class, as follows:
.ng-toast {
z-index: 100000; // I don't have any ideia why, but worked!
}
Check your modal z-index. And check your toastr z-index. Anything appearing on modal should have a higher z-index than modal z-index.
if your modal z-index is 999
.modal {
z-index: 999
}
toastr z-index should be anything above 999
The Problem:
I have an anchor tag with a class name 'hasChildren' which in turn has a span element containing the text. When using EXT's .on('mouseenter',function()) on the anchor tag, it fires the event on both the span and/or the anchor tag.
expected result:
hovering over either the span or the anchor tag, the class should be added to the anchor tag alone
current result:
hovering over either the span or the anchor tag, the class is added to the element which receives focus first.
As in the JS you'll see I tried the hover function but gives the same results.
The HTML:
<a class="hasChildren" href="#"><span>web 2.0</span></a>
The CSS:
.hasChildren {
display:block;
width:100px;
background-color:#333;
}
.hasChildren span {
background-color:#EEE;
display:block;
line-height:40px;
margin-left:10px;
padding:0 20px 10px 10px;
}
The JavaScript:
function over(e,t){
Ext.get(t).addClass('red');
}
function out(e,t){
Ext.get(t).removeClass('red');
}
Ext.onReady(function() {
//Ext.select('.hasChildren').hover(over,out,this);
Ext.select('.hasChildren').on('mouseenter',over);
Ext.select('.hasChildren').on('mouseleave',out);
});
FYI: I'm using ext-core-3.1.0 and I can get this working by using jQuery but as the lead developer requested that I only use extJS, I'd like to get this working without adding another javascript library.
Use this function of Ext.Element : addClassOnOver(). So, for your case, it will be:
Ext.onReady(function() {
Ext.select('.hasChildren').addClassOnOver('red');
});
It will automatically toggle the CSS class.
Try and surround your anchor tag in a div and then attach the listeners on the div. I think you want to try and attach the events to the outermost container in this case.
I eventually found what I was looking for. The javascript functions should change to look like this:
function over(e,t){
Ext.get(e.getTarget('a')).addClass('red');
}
function out(e,t){
Ext.get(e.getTarget('a')).removeClass('red');
}
The explanation: Previously I tried to add the class to 't' as in get(t), which rightfully could be either the parent or child element. But by using (e.getTarget('a')) I tell it to select the anchor tag and apply the class to that element alone.
This method gives one control over propagation, funny thing is the following could also work for the 'out' function and it would do exactly the same (in theory):
function out(e,t){
Ext.get(e.getTarget('span')).parent().removeClass('red');
}
Another thing I discovered: The Ext.onReady functions can also be written as:
Ext.select('.hasChildren').on( { mouseenter: { fn: over } } );
This way makes it easier to add more events to the target element(s)
Ext.select('.hasChildren').on( { mouseenter: { fn: over } }, { mouseleave: { fn: out } });
How would I select all but the last child using CSS3 selectors?
For example, to get only the last child would be div:nth-last-child(1).
You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:
:not(:last-child) { /* styles */ }
Make it simple:
You can apply your style to all the div and re-initialize the last one with :last-child:
for example in CSS:
.yourclass{
border: 1px solid blue;
}
.yourclass:last-child{
border: 0;
}
or in SCSS:
.yourclass{
border: 1px solid rgba(255, 255, 255, 1);
&:last-child{
border: 0;
}
}
easy to read/remember
fast to execute
browser compatible (IE9+ since it's still CSS3)
Nick Craver's solution works but you can also use this:
:nth-last-child(n+2) { /* Your code here */ }
Chris Coyier of CSS Tricks made a nice :nth tester for this.
When IE9 comes, it will be easier. A lot of the time though, you can switch the problem to one requiring :first-child and style the opposite side of the element (IE7+).
Using nick craver's solution with selectivizr allows for a cross browser solution (IE6+)
There is a:not selector in css3. Use :not() with :last-child inside to select all children except last one. For example, to select all li in ul except last li, use following code.
ul li:not(:last-child){ }
If you're using it within the nesting of the parent then the easiest way is:
&:not(:last-child){
....
}
Example:
.row { //parent
...
...
...
&:not(:last-child){
....
}
}
Using a more generic selector, you can achieve this as seen below
& > *:not(:last-child) {/* styles here */}
Example
<div class="parent">
<div>Child one</div>
<div>Child two</div>
</div>
This will capture all the child DIV in the parent
to find elements from last, use
<style>
ul li:not(:last-child){ color:#a94442}
</style>
Nick Craver's solution gave me what I needed but to make it explicit for those using CSS-in-JS:
const styles = {
yourClass: {
/* Styles for all elements with this class */
'&:not(:last-child)': {
/* Styles for all EXCEPT the last element with this class */
},
},
};
.nav-menu li:not(:last-child){
// write some style here
}
this code should apply the style to all except the last child