Text Alignment in Table


#1

Not sure why my Hyperlink texts are not aligning in the center of the cells

var nodeShortcutTemplate =
$(go.Node, “Auto”,
{location: go.Point.parse(“3345 2500”), isLayoutPositioned: false},
$(go.Shape, {fill: “white”, stroke: “black”, strokeWidth: 3,alignment: go.Spot.Center }),
$(go.Panel, “Table”,
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: “black”,
defaultColumnSeparatorStroke: “black”,
alignment: go.Spot.Center
},

    $(go.RowColumnDefinition,
      { column: 1, separatorStrokeWidth: 2, separatorStroke: "black" }),
    $(go.Panel, "Auto",
      { row: 0, column: 0, alignment: go.Spot.Center, width:450},
      $("HyperlinkText",
            function(node) { return node.data.anchor_url_link;},
            $(go.TextBlock, "Anchor Graphics & Captions", { font: "30px sans-serif", margin: 10})
       ),
    
     ),
     $(go.Panel, "Auto",
      { row: 0, column: 1,  alignment: go.Spot.Center, width:450},
      $("HyperlinkText",
        function(node) { return node.data.value_state_url_link;},
            $(go.TextBlock, "Value Statements", { font: "30px sans-serif", margin: 10})
      ),
    ),
    $(go.Panel, "Auto",
      { row: 1, column: 0,  alignment: go.Spot.Center, width:450 },
      $("HyperlinkText",
        function(node) { return node.data.spec_url_link;},
            $(go.TextBlock, "Specification Sheets", { font: "30px sans-serif", margin: 10 }),
       ),
    ),
    $(go.Panel, "Auto",
      { row: 1, column: 1,  alignment: go.Spot.Center, width:450 },
       $("HyperlinkText",
        function(node) { return node.data.prop_status_url_link;},
            $(go.TextBlock, "Proposal Status", { font: "30px sans-serif", margin: 10 })
        ),
        )
    ));

#2

Center alignment is the default for each object in a cell. You are making each object within each cell exactly the same width, so they are all occupying the whole cell, rather than being smaller and thus able to be aligned within the cell area.

Just remove the width: 450.
If you need a column to be wider than what is needed, use a RowColumnDefinition rather than setting them all to be the same width.


#3

Thank you Walter


split this topic #4

A post was split to a new topic: Vertical alignment within table cell