verticalAlign of ICellStyle in applyCellsStyle Methods not working (Flexsheet)

verticalAlign of ICellStyle in applyCellsStyle Methods not working (Flexsheet)

Posted by: ngvanthuong97 on 12 July 2019, 12:30 am EST

• 

  ngvanthuong97

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 July 2019, 12:30 am EST

  I want to set Cell Style in WjFlexSheet. So, I used to applyCellsStyle Method.

  • “applyCellsStyle(cellStyle: ICellStyle, cells?: CellRange, isPreview?: boolean): void”

  All properties of the ICellStyle Interfaces work except verticalAlign.
  
  This is my code:

  this._sprTemp.applyCellsStyle({
                  textAlign: 'left',
                  verticalAlign: 'middle',
                  fontFamily: 'Arial',
                  fontSize: '12px'
              }, [new CellRange(0, 0, 50, 36)]);
  

  Help me, please!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2019, 5:20 am EST

  Hi,

  The reason that vertical-align is not working because it does not work on the block-level elements i.e. the elements whose display is set to block and each cell of the FlexSheet is a block-level element.
  
  To vertically align the elements, you may use the itemFormatter property of FlexSheet and add another span element inside each cell and make it vertically-align. Please refer to the sample below:

  https://stackblitz.com/edit/angular-vsz7dz

• 

  ngvanthuong97

  • Post Options:
  • Link
    Copy

  Posted 16 July 2019, 3:27 am EST

  Hi ashwin.saxena,

  I used the itemFormatter property but vertically-align still couldn’t work even if I don’t use merge

  formatSheetInit() {
          this._sprTemp.applyCellsStyle({
              textAlign: 'left',
              verticalAlign: 'middle',
              fontFamily: 'Arial',
              fontSize: '12px'
          }, [new CellRange(0, 0, 50, 36)]);
  
          this._sprTemp.itemFormatter = function (panel, row, col, cell) {
              const oldHTML = cell.innerHTML;
              cell.innerHTML = `<span class="v-center">${oldHTML}</span>`;
          };
      }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 July 2019, 5:49 am EST

  Hey,

  The issue may be arising due to CSS. Please ensure that you have added the ‘v-center’ class in the global CSS file from the sample that I provided earlier. If this does not solve the issue, could you please provide us a sample that replicates the issue so we can investigate further.

• 

  ngvanthuong97

  • Post Options:
  • Link
    Copy

  Posted 17 July 2019, 10:50 pm EST

  Hi,

  The problem is that when I show up on the screen, the ‘v-center’ class working, and text-align does not. But when I export it to EXCEL it is the opposite.

  I don’t know what happened when I executed the EXCEL export command

  this._sprTemp.saveAsync('example.xlsx');
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2019, 7:07 am EST

  Hi,

  Regarding cells not vertically aligned in excel:

  We were able to replicate the issue at our end so we have forwarded a bug report to the dev team with internal tracking id 390801. We will give you an update as soon as the issue is fixed.

  Regarding text-align not working in browser:

  We are sorry but we were not able to replicate the issue. The text-align property is working as expected on both the browser and excel. Could you please provide us with the exact steps to replicate so we can investigate further.

  Regards,
  
  Ashwin