Styling issue

Styling issue

Posted by: bzhang on 11 November 2019, 8:35 am EST

• 

  bzhang

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 November 2019, 8:35 am EST - Updated 3 October 2022, 9:49 am EST

  Hello, Wijmo team,
  
  Our project is an angular project and using angular 5. We were using an old version of Wijmo 5 which is 328 and upgrade to 568 months ago.
  
  Now we found a styling issue which brings bad user experience of our customer.
  
  In some cases, we use wj-combo-box, wj-input-date and wj-input-number in grid column for editing. Now, we find that those components are higher than grid row height. So, every time when user start edit the column, grid change its row height and the change makes users feel uncomfortable. Is there a way that we still can use those components and they won’t change row height and will visible (not hide any parts)?
  
  Here is part of the code:

  <wj-flex-grid-column [header]=“‘Begin Date’” [binding]=“‘beginDate’” [isReadOnly]=“false” [width]=“105”
  
  [cssClass]=“‘editAble’” [name]=“‘beginDate’” [dataType]=“‘Date’”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <div *ngIf=“cell.item.beginDate”>{{cell.item.beginDate | amUtc | amDateFormat:‘l’ }}
  
  
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  <wj-input-date [(value)]=“cell.item._beginDate” format=“M/d/yyyy” [isRequired]=“false”>
  
  
  
  
  
  <wj-flex-grid-column [header]=“‘End Date’” [binding]=“‘endDate’” [isReadOnly]=“false” [width]=“105”
  
  [cssClass]=“‘editAble’” [name]=“‘endDate’” [dataType]=“‘Date’”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <div *ngIf=“cell.item.endDate”>{{cell.item.endDate | amUtc | amDateFormat:‘l’ }}
  
  
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  <wj-input-date [(value)]=“cell.item._endDate” format=“M/d/yyyy” [isRequired]=“false”>
  
  
  
  
  
  <wj-flex-grid-column [header]=“‘Price’” [binding]=“‘price’” [name]=“‘price’” [isReadOnly]=“false”
  
  [width]=“90” [cssClass]=“‘editAble’”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  

  
  
  <wj-input-number [(value)]=“cell.value” [format]=“wijmoPriceInputFormat”>
  
  
  
  

  
  
  
  
  <wj-flex-grid-column [header]=“‘UOM’” [binding]=“‘uom’” [isReadOnly]=“false” [width]=“65” [name]=“‘uom’”
  
  [cssClass]=“‘editAble’”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell”>
  
  <div *ngIf=“cell.item.product&&cell.item.product.productUoms”>
  
  <wj-combo-box [itemsSource]=“cell.item.product.productUoms” [displayMemberPath]=“‘uom’”
  
  [(selectedValue)]=“cell.value” [selectedValuePath]=“‘uom’”>
  
  
  
  
  
  <div *ngIf=“cell.item.product&& !cell.item.product.productUoms”>
  
  <wj-combo-box [itemsSource]=“cell.item.product.productUoms” [displayMemberPath]=“‘uom’”
  
  [(selectedValue)]=“cell.value” [selectedValuePath]=“‘uom’”>
  
  
  
  
  
  
  
  

  And will attach screen shots of before and after the changes. In before changes, it is show 14 rows in the grid. After the changes, it is show 10 rows in the grid.
  
  

  

  2222×874 242 KB

  

  2224×864 189 KB

  Bob

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2019, 10:07 pm EST

  Hi,

  To fix the issue you may opt one of the following approaches:
  
  1). Set the default row height to some higher value like

  grid.rows.defaultSize = 50;
  

  2). remove the padding from the grid cell and border from the editor component. Please refer to the following code snippet and the sample demonstrating the same:

  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  	<div class="display-cell">{{cell.item.date}}</div>
  </ng-template>
  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell" let-item="item">
  	<wj-input-date style="border: none; height: 100%; width: 100%"  [(value)]="cell.value" format="M/d/yyyy" [isRequired]="false"></wj-input-date>
  </ng-template>
  // in styles.css
  .no-padding-cell {
    padding: 0;  
  }
  .no-padding-cell .display-cell {
    padding: 2px;
  }
  

  https://stackblitz.com/edit/angular-y8snaq?file=app/app.component.ts

  Regards
  
  Sharad