Some cards, such as a single row Grid, leave too much unused space inside the card. Is there a way to further reduce the height of a card to more closely match its contents?

This LVWeb plugin allows cards on a page created after the plugin is installed to have smaller height values than the default for LVWeb. This allows for single row height grids and shorter charts and visualizations. Note that the default height is quite small, so the new card will need to be stretched taller in most cases.

Note: This has only been tested in LVWeb versions 1.3 and 1.4 at the time of this writing.

Steps:
1. In StreamBase Studio, create the following directory structure adding these two new files where indicated.
2. Start LiveView Web.
3. Connect to LVWeb from your browser (please use a supported browser).
4. Create a new page and add a new card.
5. Drag the card height to a new position.

Project directory structure:

lv-web/
  plugins/
    com.tibco.sb.ldm.web.plugins.cards/
      com.tibco.sb.ldm.web.plugins.cards.js
      META-INF/
        plugin.json

plugin.json:

{
	"name": "com.tibco.sb.ldm.web.plugins.cards.height",
	"module": {
		"core": [
			"com.tibco.sb.ldm.web.plugins.cards.js"
		]
	},
	"staticContents": [],
	"dependencies": []
}

com.tibco.sb.ldm.web.plugins.cards.js:

/**
 * Created by mtunpech on 10/03/17
 */
;(function(angular) {
	'use strict';

	angular
		.module('com.tibco.sb.ldm.web.plugins.cards.height', ['com.tibco.sb.ldm'])
		.run(onModuleRun);

	onModuleRun.$inject = ['DashboardConfiguration'];

	function onModuleRun(DashboardConfiguration) {
		DashboardConfiguration.overrideSettings({
			defaultPageLayoutConfig: {
				// columns: 6,               // the width of the grid, in columns
				// pushing: true,            // whether to push other items out of the way on move or resize
				// swapping: true,           // whether or not to have items of the same size switch places instead of pushing down if they are the same size
				// width: 'auto',            // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
				// colWidth: 50,            // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
				// margins: [10, 10],        // the pixel distance between each widget
				// outerMargin: false,       // whether margins apply to outer edges of the grid
				// minColumns: 6,            // the minimum columns the grid must have
				rowHeight: 25,            // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
				minSizeY: 2,              // minimum row height of an item
				minRows: 2,               // the minimum height of the grid, in rows
				// maxRows: 20,              // the maximum height of the grid, in rows
				// defaultSizeX: 2,          // the default width of a gridster item, if not specified
				defaultSizeY: 4,          // the default height of a gridster item, if not specified
				// minSizeX: 1,              // minimum row height of an item
				// minSizeY: 1,              // maximum row height of an item
			}
		});
	}
}(angular));

The height values defined in the plugin, if changed, are only expected to affect cards on new pages created after the change. Previously existing pages and cards are expected to retain their previous settings.

 

Configuration example