flex-layout: Print Preview triggers xs breakpoint
Bug, feature request, or proposal:
Using chrome: while using either fxHide fxShow.xs or fxShow fxHide.xs the xs breakpoint is triggered when printing. This does not seem to be the behavior on firefox (I am on a mac so have not tested IE).
What is the expected behavior?
A piece of paper is big enough that it should not be triggering the xs breakpoint Also it should be consistent across browsers
What are the steps to reproduce?
Providing a StackBlitz (or similar) is the best way to get the team to see your issue.
What is the use-case or motivation for changing an existing behavior?
The existing behavior seems to be incorrect and probably overlooked.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 5.2.0 flex-layout: 2.0.0-beta.12
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (9 by maintainers)
Commits related to this issue
- feat(core): add print support with mediaQuery override Implement PrintHook service to intercept print mediaQuery activation events. * suspend activation changes in MediaMarshaller while print-mode ... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add print support with mediaQuery override Implement PrintHook service to intercept print mediaQuery activation events. * suspend activation changes in MediaMarshaller while print-mode ... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add print support with mediaQuery override Implement PrintHook service to intercept print mediaQuery activation events. * suspend activation changes in MediaMarshaller while print-mode ... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add print support with mediaQuery override Implement PrintHook service to intercept print mediaQuery activation events. * suspend activation changes in MediaMarshaller while print-mode ... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add print support with mediaQuery override (#954) When printing developers can now configure how layouts should render. Default print will use the current layout and current elements show... — committed to angular/flex-layout by ThomasBurleson 5 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): add support for 1..n mediaQuery overrides during printing When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows t... — committed to angular/flex-layout by ThomasBurleson 6 years ago
- feat(core): support beforeprint and afterprint hooks Extends the PrintHook service to also register beforeprint and afterprint event handlers to synchronously update styles and prevent layout switchi... — committed to epelc/flex-layout by epelc 5 years ago
- feat(core): support beforeprint and afterprint hooks Extends the PrintHook service to also register beforeprint and afterprint event handlers to synchronously update styles and prevent layout switchi... — committed to epelc/flex-layout by epelc 5 years ago
I’m very excited to say that the fix for this, #954, is nearing completion. Thanks to Thomas’ excellent work on this, the API is really simple to use, and we’d love some feedback before we make this change to the library.
First: by default, print layouts will fallback on the currently activated breakpoints. That is, they will no longer deactivate on print by default.
Second: you can specify a specific breakpoint alias that will be your “primary print” alias (e.g. md, xs, etc). You can also specify more than one in case you want a fallback mechanism.
Third: we’ve added support for
fxShow.printandfxHide.printnatively as it’s very critical behavior to supportLet us know what you think of these changes, and feel free to check out the PR (though don’t necessarily add comments for small things – it’s still being polished!).
Based on the following link: https://github.com/angular/flex-layout/wiki/BreakPoints I have tried applying this and create the below stackblitz: https://stackblitz.com/edit/custom-print-directives
It has a few issues still:
This is not a bug, so much as a possible opportunity to add a feature.
By default, the media query engine is only tied to the screen. You can augment this yourself by providing custom breakpoints (or just mapping over the defaults) and including the following query:
(max-width: 575px)becomesprint, screen and (max-width: 575px)The possible avenue for feature enhancement is adding a token that does this for the user. Something like
FLEX_BREAKPOINT_PRINT. I’ll discuss this with @ThomasBurleson offline, but in the meantime, the workaround is providing your own breakpoints and augment them with theprintproperty.