Extra spacing when using ng-template wjFlexGridCellTemplate

Extra spacing when using ng-template wjFlexGridCellTemplate

Posted by: pmithilesh on 13 October 2017, 12:19 pm EST

• 

  pmithilesh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 October 2017, 12:19 pm EST

  Code-----

  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-item=“item”>
  
  
  
  

  I am getting extra space like blue border on text box and when i click on blue border it goes inside the wijmo cell how to avoid that space ?

  Thanks

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 15 October 2017, 9:26 pm EST

  This is because of the Default Left Padding that is applied to the wj-cell class. You can easily set the CSS properties as per your requirement and remove the space.

  Also please ensure that Width of the Column is almost same as the Default Width of the Input Text so that you do not get extra spaces.

  Let me know if you are still facing issues.

  Thanks,
  
  Abhishek

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 22 February 2018, 8:07 am EST

  Hi abhishek,

  I tried to remove the padding from wj-cell it did not solve the issue,
  
  Can you please show some sample i can look for its right now user can hit that border and cell goes in to edit mode thats big no for user in my project

  Thanks for your help

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 22 February 2018, 8:04 pm EST

  Hi,

  I have attached a sample where I have don the following modifications

  1. Added a Cell Template which contains an Input Box
  2. Set the Width of Input Box to 100%
  3. Set the Padding of wj-cell to 0px ( Default.html)

    .wj-cell {
            
              padding: 0px;
             
          }
  

    <wj-flex-grid [itemsSource]="data">
                  <wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'" [isReadOnly]="true">
                      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                          <div>
                              <img src="resources/{{cell.item.country}}.png" />
                              {{cell.item.country}}
                          </div>
                      </ng-template>
                  </wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Country'" [binding]="'amount'" [width]="'*'">
                      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
                          <input type="text" *ngModel="cell.item.amount" style="width:100%">
                      </ng-template>
                  </wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Active'" [binding]="'active'"></wj-flex-grid-column>
  
              </wj-flex-grid>
  ```[zip filename="FlexGridIntro.zip"]public\uploads\1904f8fec40de7035e73e414f19d6f1b1519376617131.zip[/zip]
  
  If you are still facing issues then please elaborate the steps to replicate the issue