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/
On Fri, Aug 30, 2019 at 9:59 PM Pragathi Srinivasan <[email protected]> wrote: > 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* > <https://angularjs.org/>. > 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> > > -- > 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/angular/9f07166e-7393-4ce8-b82b-296b1e858a9d%40googlegroups.com > <https://groups.google.com/d/msgid/angular/9f07166e-7393-4ce8-b82b-296b1e858a9d%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAEwHGW1TQys-85cfB%2BP0z_ibU0ZzAkMdueka2TQ2Trzdc6V-gg%40mail.gmail.com.
