Header Column Alignment

Header Column Alignment

Posted by: johngiblin on 16 November 2020, 4:25 am EST

• 

  johngiblin

  • Post Options:
  • Link
    Copy

  Posted 16 November 2020, 4:25 am EST

  For some reason, the alignment of my grid is not consistent. I see the header columns align right, center and left. See below.
  
  Is the a setting to align the header column
• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Replied 17 November 2020, 6:29 pm EST

  Hi,
  
  If we understand correctly you want to set the alignment for columns. For this, you may use cssClass property and set the alignment in the CSS. Please refer to the following code snippet.
  
  

  var cols = [
    {
      id: 'title',
      caption: 'Title',
      dataField: 'title',
      cssClass: "center"
    }
  ]
  let dv = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout());
  //in Css file
  .center{
      text-align: center;
  }

  
  
  Further, if it is not the case. Please explain more about the issue that you are facing so that we could have a better understanding of the issue and assist you accordingly.
  
  Regards
  Avinash
  
• 

  johngiblin

  • Post Options:
  • Link
    Copy

  Replied 11 December 2020, 3:02 am EST

  So it appears if there is no data in a column the alignment changes

• Marked as Answer

  

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Replied 13 December 2020, 7:31 pm EST

  Hi John,
  
  We are not able to replicate the issue at our end. Please share a small sample that replicates the issue so that we could investigate it further and assist you accordingly. You may also change the following sample that we used for testing.
  
  sample: https://codesandbox.io/s/dvjs-sample-forked-1ps6n?file=/src/index.js
  
  Regards
  Avinash