Win a copy of AWS Security this week in the Cloud/Virtualization forum!
  • 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
  • Paul Clapham
  • Jeanne Boyarsky
  • Junilu Lacar
  • Henry Wong
Sheriffs:
  • Ron McLeod
  • Devaka Cooray
  • Tim Cooke
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Frits Walraven
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • salvin francis
  • fred rosenberger

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
 
The human mind is a dangerous plaything. This tiny ad is pretty safe:
Devious Experiments for a Truly Passive Greenhouse!
https://www.kickstarter.com/projects/paulwheaton/greenhouse-1
    Bookmark Topic Watch Topic
  • New Topic