• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • paul wheaton
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Ron McLeod
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Tim Holloway
  • Carey Brown
  • salvin francis

how to resolve the resolution for UI with different responsiveness with fxFlex in angular

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is my UI code for the header section. I am facing overlapping issues due to resolution. Please help me out this issue. I am new to angular.
Please help me ASAP. Thanks in advance.


<div fxLayout="row" fxFlex="{{isShowDealerSection?55:72}}">
       <div fxFlex="30" fxFlex.md="10" fxFlex.gt-xs="100%">
         <button mat-button target="_blank" (click)="navigateToNew1()" [ngClass]="new1SummaryClass">
           NEW1
         </button>
       </div>
       <span style="margin: 3px">|</span>
       <div fxFlex="20" fxFlex.md="25" fxFlex.gt-xs="100%">
         <button mat-button target="_blank" (click)="navigateToNew2()" [ngClass]="new2SummaryClass">
       NEW2
         </button>
       </div>
       <span style="margin: 3px">|</span>
       <div fxFlex="20"  fxFlex.md="25">
         <button mat-button target="_blank" (click)="navigateToNew3()" [ngClass]="new3SummaryClass">
           NEW3
         </button>
       </div>
       <span *ngIf="this.sharedDataService.adminScreenAccess" style="margin: 3px">|</span>
       <div fxFlex="15"  fxFlex.md="35" *ngIf="this.sharedDataService.adminScreenAccess">
         <button mat-button [matMenuTriggerFor]="ucmenu" [ngClass]="adminClass">
           NEW4
         </button>
         

         <mat-menu #ucmenu="matMenu">
           <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess" <br />              (click)="navigateTovehicleDecertification()">Vehicle</button>
           <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess" <br />              (click)="navigateToDealerParticipant()">Participant </button>
           <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess" <br />              (click)="navigateToRoleDetailScreen()">Role </button>
           <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess" <br />              (click)="navigateToVehicleHistory()">Audit </button>
           <!-- <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess" <br />              (click)="navigateToSaleReversalReport()">Report</button> -->
         </mat-menu>
       </div>
       <span style="margin: 3px">|</span>
       <div fxFlex="100">
         <button mat-button target="_blank" <br />            (click)="navigateToSaleReversalReport()" [ngClass]="invSummaryReportClass">REPORT</button>
       </div>
     </div>
     <div *ngIf="isShowDealerSection" fxLayout="row" class="uc-header-dealer-details" fxFlex="19">
       <div fxFlex="40" fxLayout="column">
         <span style="margin-bottom:-8px">SSSSSSSSSSSSS :  <span style="color:gray" <br />              [attr.title]="sharedDataService.dealerName">{{sharedDataService.ggCopy}}</span></span>
         <span>SSSSSSSSSSS  :  <span style="color:gray">{{sharedDataService.bbbjjCode}}</span></span>
       </div>
 
Pragathi Srinivasan
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
please help me in solving this issue
 
If you live in a cold climate and on the grid, incandescent light can use less energy than LED. Tiny ad:
Enterprise-grade Excel API for Java
https://products.aspose.com/cells/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!