Palette Node Stretch Horizontally

GoJS
1

Hello All,

A quick query, in the palette the width of the palette is determined by Bootstrap col-* classes, therefore it is not a static width. I have tried reading up on the stretch property but cant seem to get it to work.

We have x number of items in the palette where we would like each node to fill horizontally the available space. I have a simple node setup as below.

 function createPalleteTemplate(fill, activity) {
    return GO(go.Node, 'Horizontal', {
        defaultAlignment: go.Spot.Left,
        stretch: go.GraphObject.Horizontal,
    }, GO(go.Panel, 'Auto', {
        width: 36,
        height: 36
    }, GO(go.Shape, 'Rectangle', {
        width: 35,
        height: 35,
        strokeWidth: 1,
        stroke: '#666',
        fill: fill,
        alignment: go.Spot.Center
    }), GO(go.Picture, {
        source: activity.TileImage,
        height: 24,
        width: 24,
        alignment: go.Spot.Center,
        stretch: go.GraphObject.UniformToFill
    })
    ), GO(go.TextBlock, { margin: new go.Margin(0, 8, 0, 4) }, new go.Binding('text', 'Display')));
}

The palette setup is simple as below

palette = GO(go.Palette, 'palette');
palette.animationManager.isEnabled = false;
palette.nodeTemplateMap = paletteTemplateMaps;
palette.toolManager.dragSelectingTool.isEnabled = false;
palette.maxSelectionCount = 1;
palette.model.nodeDataArray = activityModelArray;

However the nodes are simply flowing together, or if the space is too small centered vertically. We would like no-matter the width that they are stacked vertically, left aligned and fill the horizontal space available.

I must be missing something trivial…

Regards, Nico

2

Perhaps just:
palette.layout.wrappingColumn = 1;

Setting Node.stretch, as you do when creating parts for the palette, has no effect.