SpreadJS 14
Features / Cells / Cell Alignment and Indentation
In This Topic
    Cell Alignment and Indentation
    In This Topic

    You can align or indent text in a cell. You can also add a text decoration. You can specify the vertical and horizontal alignment using the hAlign and vAlign methods. You can specify the indent using the textIndent method.

     

    Cell alignment and indentation

    The vAlign method also supports the text vertical alignment in cell editing mode as shown in the below picture.

     

    Vertical text alignment

    Note: In cell editing mode, the vertical alignment of the text is only supported for the "editable div" and is not supported for the "textarea" element. While working on desktop devices with cells of text cell type, you need to replace the textarea element with editable div in order to implement vertical alignment of text in cell editing mode.

    Also, the Ime-mode does not work in two browsers : Google Chrome and Mozilla Firefox.

    Using Code

    This example sets the vertical and horizontal alignment for cell B2 and specifies a text indent for cell B3.

    JavaScript
    Copy Code
    window.onload = function()
    {
       var spread =
       new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
       var activeSheet = spread.getActiveSheet();
      
       // Set the horizontal and vertical alignment of string to “center”
       var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
       cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
       cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
       cell.value("Alignment");
       // Set the indent of strings.
       cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);
       cell.textIndent(2);
       cell.value("Indent");
       activeSheet.getRange(1, -1,  2, -1, GC.Spread.Sheets.SheetArea.viewport).height(40);
       activeSheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).width(120);
    }
    
    See Also