title: Header name not displaying completely in ag-grid angular 2
body: <p>I am using ag-grid for Angular 2. In that i have multiple headers like token number. It is not displaying completely. It is just like Token N...</p>
  
  <p>Below is my component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import{ GridOptions } from 'ag-grid';
  
  import { FlightProcessGridStatusComponent } from '../flight-process-grid-status/flight-process-grid-status.component';
  import { FetchedFlightInfoBean } from '../../_model/FetchedFlightInfoBean';
  
  @Component({
    selector: 'app-user-home-child',
    templateUrl: './user-home-child.component.html',
    styleUrls: ['./user-home-child.component.css'],
    //providers: [FetchedFlightInfoBean]
  })
  export class UserHomeChildComponent {
  
  
      private gridOptions: GridOptions;
      private refreshFlag: boolean;
      fetchedFltBean: FetchedFlightInfoBean [] = [
  
    {tokenNbr:1, flightNbr:"AY01", flightDate: "12-aug-17", flightBrPoint:"DEL", flightoffPoint:"LKO", nbrPax:2, okEmail:"Y", nonOkEmail:"N", okphn:"Y", nonOkPhn:"N", status:"WAIT"},
    {tokenNbr:2, flightNbr:"AY02", flightDate: "6-aug-17", flightBrPoint:"BAN", flightoffPoint:"MUM", nbrPax:4, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"MISSED-CONNECTION"},
    {tokenNbr:3, flightNbr:"AY013", flightDate: "22-aug-17", flightBrPoint:"HEL", flightoffPoint:"PAR", nbrPax:1, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"FLOWN"}
    ];
  
  
      constructor() {
  
          this.gridOptions = &lt;GridOptions&gt;{headerHeight: 48,
                  rowHeight: 35,
  
                  rowSelection: 'single',
                  enableColResize: true,
                  onGridReady: (params) =&gt; {
                      params.api.sizeColumnsToFit();
                  }
  
  
                  };
  
  
          this.gridOptions.columnDefs = [
              {headerName: 'Token Number', field: 'tokenNbr'},
              {headerName: "Flight Number", field: "flightNbr"},
              {headerName: "Flight Date", field: "flightDate"},
              {headerName: "Flight Boarding Point", field: "flightBrPoint"},
              {headerName: "Flight Off Point", field: "flightoffPoint"},
              {headerName: "NBR of Pax", field: "nbrPax"},
              {headerName: "Ok Email", field: "okEmail"},
              {headerName: "NonOk Email", field: "nonOkEmail"},
              {headerName: "Ok Phone", field: "okphn"},
              {headerName: "NonOk Phone", field: "nonOkPhn"},
              {
                  headerName: "Status", 
                  field: "status",
                  cellRendererFramework: FlightProcessGridStatusComponent,
  
              }
  
          ];
  
  
  
           this.gridOptions.rowData = this.createRowData();
  
      }
  
      public refreshRowData()
      {
          this.refreshFlag = true;
          alert(`inside refreshRowData`);
          let rowData = this.createRowData();
          this.gridOptions.api.setRowData(rowData);
  
      }
  
      private createRowData() {
  
  
          if(this.refreshFlag)
              {
                  alert(`refresh call`);
              }
          let rowData:FetchedFlightInfoBean[] = this.fetchedFltBean;
  
  
  
         /* let rowDataLength = rowData.length;
          alert(`${rowDataLength}`)
         for (var i = 0; i &lt; rowDataLength; i++) {
              rowData.push({
                  tokenNbr: 1,
                  flightNbr: "",
                  flightDate: "",
                  flightBrPoint: "",
                  flightoffPoint: "",
                  nbrPax: 3,
                  okEmail: "",
                  nonOkEmail: "",
                  okphn: "",
                  nonOkPhn: "",
                  status: "",
              });
          }
  */      
  
          return rowData;
      }
  
  
  
  }
  </code></pre>
  
  <p>next is my html part....</p>
  
  <pre><code>    &lt;div style="width: 800px; padding-left: 100px" class="ag-fresh ag-header-cell-label"&gt;
      &lt;button (click)="refreshRowData()"&gt;Refresh Data&lt;/button&gt;
      &lt;button (click)="autoFit()"&gt;AutoFit&lt;/button&gt;
      &lt;ag-grid-angular style="width: 1000px; height: 1000px;" 
                       [gridOptions]="gridOptions"
                       enableSorting
                       enableFilter &gt;
      &lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my CSS-</p>
  
  <pre><code> @import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
  .ag-fresh {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
  }
  .ag-fresh .ag-root {
    border: none;
  
  }
  .ag-fresh .ag-header-container {
    background: #fff;
  }
  .ag-fresh .ag-header { 
    border-bottom: 2px solid #000;
  }
  .ag-fresh .ag-header-row {
    font-weight: bold;
    font-size: 13px;
    line-height: 1em;
    color: #000;
    background: #fff;
    border: none;
  }
  .ag-fresh .ag-ltr .ag-header-cell {
    padding: 10px;
    border: none
  }
  .ag-fresh .ag-row {
    border-bottom: 1px solid #ddd;
  }
  .ag-fresh .ag-row:nth-child(odd){
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
  }
  .ag-fresh .ag-row:last-child {
    border-bottom: none;
  }
  .ag-fresh .ag-row:hover {
    background-color: #d9edf7;
    border-top: 1px solid #aaa;  
    border-color: #aaa;
  }
  .ag-fresh .ag-row .ag-cell {
    color: #333;
    padding: 10px 15px;
  }
  .ag-fresh .ag-row .ag-cell:focus,
  .ag-fresh .ag-row .ag-cell:hover {
    font-weight: bold;
    background-color: #d0edf3 ;
    color:#000;
  }
  
  .ag-header-cell-label {
      text-overflow: clip;
      overflow: visible;
      white-space: normal;
  }
  </code></pre>
  
  <p>In my component you can see I have fixed the size of the column using  params.api.sizeColumnsToFit(). This allow my columns to display without a horizontal scroll bar. So i am getting complete data in one view.</p>
  
  <p>But now my column-headers are not wraaping up there name. I am not getting the complete name displayed. 
  For example, If the column-header is Token Number then only "token n..." this part is displayed.</p>
  
  <p>Please help.</p>