Develop Reference

Why is chrome's print preview and printed view is different ? [HTML - CSS]

I have a demo angular project which has basic text and table inside as below.There is print button which is calling window.print() to make the page printed with applied styling.
printPage() {
window.print();
}
css:
#media print {
#page {
size: landscape;
margin: 0;
}
}
My demo project link:
https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts
My aim is being able to print this table landscaped exactly how it seems on the web page without any crops.^
After print button clicked preview on chrome's print dialog looks great as below
Unfortunately after print, result is not as expected.As you can see there are crops from left and right sides of the paper.Although my other attempts to set margin:0 padding:0 stylings didn't work.How can I print exactly as same as what I'm seeing on HTML page?
I tried also this kind of styling
#media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}

I've checked your example and it's a problem related with the printer. Some printers have a "non-printable margin" by default so there is no way to print on the edges.
The user could be change manually if there are some options for scaling the document but it would be a bad solution.
My solution would be adding some margins in the CSS for the print media. For example, in this case, I 've added a left and right margin and everything it's printed correctly.
.designed__table {
width: 100%;
td,
th {
padding: 5px;
border: 1px solid;
}
}
#media print {
#page {
size: landscape;
margin: 0px 10px;
}
}
.print-container {
position: absolute;
}

Increasing the Width of the MatBottomSheet?

The following CSS increases the height but not the width:
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw;
margin-top: 80px;
}
Anyone know how to increase the MatBottomSheet width? Stackblitz new window demo.
Note that the demo has to run in a new window (Open in New Window) in order to see that the MatBottomSheet is not full view.

this is because you have mat-bottom-sheet-container-large applied to the same element which is having css
.mat-bottom-sheet-container-large {
min-width: 512px;
max-width: calc(100vw - 256px);
}
remove this class or add !important property to min-width in your mat-bottom-sheet-container class
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw !important;
margin-top: 80px;
}

Better instead of CSS overwriting .mat-bottom-sheet-container, you can use your own custom CSS class for every bottom sheet and pass that class to the MatBottomSheet with the panelClass attribute in the configuration object.
this.myBottomSheet.open(MyComponent, {
panelClass: 'my-component-bottom-sheet'
});
In your global styles you define your custom class:
.my-component-bottom-sheet {
min-height: 100vh;
min-width: 100vw !important;
margin-top: 80px;
}
And so you can define separate classes for each bottom sheet.

So for something like this, when you want to edit the size, it's easiest to wrap your bottom sheet component in a div, and set the min-width on that - rather than trying to override the outer/parent width.
HTML:
<div class="bottom-sheet-containter">
//Bottom sheet content
</div>
CSS:
.bottom-sheet-containter {
min-width: 80vw !important;
}
I had ran into the same problem but this solution worked perfectly for me.

Don't use jQuery DOM changes when printing

Update: CSS solution below.
I'm using the fullpage.js jQuery plugin which unfortunately also affects the printing of the webpage, only displaying the current viewport display and its sibling.
The problem I have is that the print command uses the DOM (obviously), but the plugin has already made inline CSS changes in the DOM. Is there a way to disable the DOM changes for print?
This doesn't work, but here's my idea:
$(document).ready(function() {
if(#media !print) { // PS: Not real code!
$('#fullpage').fullpage();
}
});
------ CSS solution -------
Praveen's reply led me on the right course. The CSS needed to override the fullpage.js inline styles are:
/* Override javascript inline styles */
html,
body {
overflow: visible !important;
height: auto !important;
}
.fullpage-wrapper {
height: auto !important;
transform: none !important;
transition: none !important;
}
.fp-section {
height: auto !important;
}
.fp-slidesContainer {
width: auto !important;
transition: none !important;
transform: none !important;
}
.fp-slides,
.fp-slides * {
position: static !important;
}
.fp-slide {
width: auto !important;
}

Do something like this in your CSS:
Hiding the full page slides:
.fp-slides {
display: none;
}
Or making them static, as this would do the stuff by rendering the contents normally:
.fp-slides, .fp-slides * {
position: static !important;
/* I don't like putting !important,
but there is no other way to override the inline styles without this!*/
}
Else, you can specify the stylesheet to apply for only screen as the media:
<link rel="stylesheet" href="fullpage.css" media="screen" />

You can use a flag and set it true when the printing function is called:
var flag = false;
$(document).ready(function() {
if(flag === false) {
// all your code
}
function toPrint() {
flag = true;
window.print();
}
});

Change Textfield colour on focus ExtJs

I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You

You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}

Intro.js: highlighted area doesn't work as expected

I'm using the very interesting javascript library intro.js.
However, in my application, the highligted area becomes almost completely white.
I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?

Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):
.introjs-helperLayer {
background: transparent;
}
.introjs-overlay {
opacity: 0 !important;
}
.introjs-helperLayer:before {
opacity: 0;
content: '';
position: fixed;
width: inherit;
height: inherit;
border-radius: 0.5em;
box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
opacity: 1;
}
.introjs-helperLayer:after {
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 1000;
}
This will solve your problem. Hope it helps as it did for me! Shout to #weili1977 and #exoJSON who provided the answer in GitHub.

The problem can be fixed by setting absolute position for parent element:
.introjs-fixParent {
position: absolute !important;
}

This is common for users using table row element. I solve mine by adding these lines to css.
.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }

I managed to get a useable result with this:
.introjs-helperLayer {
mix-blend-mode: overlay !important;
}

I set the target element position to absolute (in corresponding CSS) and it works now!
see here - http://prntscr.com/1dl0db

I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:
It's seems you're using another UI library like ExtJs or something,
make sure you don't have any CSS conflicts.
Try to change
data-intro and data-step in another element, for example if now
you have the data-intro and data-step in the form element,
change it to an upper element or a div.

In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.

Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146