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

[Pragathi Srinivasan]

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>

[Crystal O'Mara]

I would recommend adding class names to the areas you would like to style and not use inline the syntax fxLayout="" because it will end up giving you a lot more flexibility. 

This game will change my world https://flexboxfroggy.com/

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/9f07166e-7393-4ce8-b82b-296b1e858a9d%40googlegroups.com.