I have the following Angular code, but when I apply zoom on smaller resolutions, the report viewer dropdown becomes misaligned.
It seems to be caused by the dx-overlay-wrapper class.
Ticket
T1279911
Visible to All Users
Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.
Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.
Hi Diego,
I've created a simple example using our Project Template Kit but could not reproduce the issue. To avoid any misunderstanding, could you please share a reproducible sample that I can investigate on my side? I will review everything and let you know my results.
Best regards,
Boris
Hello, what you have to do is the following,
Create a project in angular, then, in the main typescrit create a "ngDoCheck" method, then put this line
if (zoomContainer) {
this.renderer.setStyle(zoomContainer, 'zoom', this.zoomScreemLittle ? '100%' : this.zoomScreemStandar ? '69%' : '100%');
}
,and play a report on a laptop, and you will see that the report viewer, specifically the export formats display, is not located in the correct position
Thank you for the reply.
Unfortunately, the
zoomScreemLittleandzoomScreemStandarvariables are unknown to me so I'm not sure how to use them correctly. However, I've attached a simple Angular reporting example that demonstrates the correct zoom setting. Could you please update it to demonstrate the issue and share it with me?Best regards,
Boris
this.widthChange = this.breakpointObserver .observe([ '(max-width: 575px)', // XS '(min-width: 576px) and (max-width: 767px)', // Small '(min-width: 768px) and (max-width: 991px)', // Medium '(min-width: 992px) and (max-width: 1199px)', // Large '(min-width: 1200px) and (max-width: 1366px)', // Large '(min-width: 1367px)', // XL ]) .subscribe((state: BreakpointState) => { this.isXSmall = state.breakpoints['(max-width: 575px)']; this.isSmall = state.breakpoints['(min-width: 576px) and (max-width: 767px)']; this.isMedium = state.breakpoints['(min-width: 768px) and (max-width: 991px)']; this.isLarge = state.breakpoints['(min-width: 992px) and (max-width: 1199px)']; this.isStandar = state.breakpoints['(min-width: 1200px) and (max-width: 1366px)']; this.isXLarge = state.breakpoints['(min-width: 1367px)']; //actual this.currentWidth = window.innerWidth; this.currentHeight = window.innerHeight; this.zoomScreemLittle = this.isXSmall || this.isSmall; this.zoomScreemStandar = this.isStandar || this.isLarge; });please, help me
Hi Diego,
If you want me to continue my investigation, please update the example I sent above so I can just restore packages, run the sample, and reproduce the issue. I will review it and do my best to put you on the right track.
I'm looking forward to your reply.
Best regards,
Boris
Hi, I couldn't send you the project because it weighs more than 130mb, but as you can see I applied the zoom and the combos look misaligned, just add this in the ts report-viewer.ts
ngAfterViewInit() {
const zoomContainer = this.document.body;
if (zoomContainer) {
this.renderer.setStyle(zoomContainer, 'zoom', '69%');
}
}
Hello,
If the project's size is greater than 30MB, please clear the "bin", "obj", "node_modules", ".vs", and "packages" folders from the solution and project folders, and recreate the archive to submit it to our Support Center. Another way is to send the project in chunks: https://www.win-rar.com/split-files-archive.html?&L=0.
However, as far as I understand, I can apply some change to the
report-viewer.tsfile to reproduce the issue. As you may have already seen in the project I sent previously, here is the content of myreport-viewer.tsfile:import { Component, Inject, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'report-viewer', encapsulation: ViewEncapsulation.None, templateUrl: './report-viewer.html', styleUrls: [ "../../../node_modules/devextreme/dist/css/dx.material.blue.light.css", "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css", "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.blue.light.css", "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" ] }) export class ReportViewerComponent { reportUrl: string = "TestReport"; invokeAction: string = '/DXXRDV'; onBeforeRender(pEvent: any) { pEvent.args.reportPreview.zoom = 0.6; } constructor(@Inject('BASE_URL') public hostUrl: string) { } }Please send me the file's complete updated code (not only the
ifblock or the method, but the complete code).I will apply it to my project and let you know my results.
Best regards,
Boris
please check