Fix Blox widget height for JTD button

[rahuldhomane]

Hi,

Is there a single script that can be embedded in a Blox widget to fix the height of the widget?

I am using JTD in Blox and am not able to manage the height of the widget. Please let me know if I need to change anything in the configuration file.

Thanks,

Rahul 

[rahuldhomane]

Hi, 

@harikm007  can you please help me on this request?

[harikm007]

Hi @rahuldhomane ,

Can you share the blox script and configuration you are using?

-Hari

[rahuldhomane]

--------Editor script-----

{

"style": "",

"script": "",

"titleStyle": [

{

"display": "none"

}

],

"body": [

{

"type": "ActionSet",

"style": {

"height": "-20px"

},

"actions": [

{

"type": "JTD",

"title": "View Channel by Specialty",

"data": {

"dashboardId": "62d954d0d2e8cf003784b8b6",

"args": {

"displayDashboardsPane": false,

"displayFilterPane": false,

"drilledDashboardDisplayType": 2

}

},

"style": {

"height": "1.9vw",

"margin-top": "-1.0vw",

"margin-left": "13.19vw"

}

}

]

}

]

}

---------------Config-----------------------------------------

{

"fontFamily": "Open Sans",

"fontSizes": {

"default": 16,

"small": 14,

"medium": 22,

"large": 32,

"extraLarge": 50

},

"fontWeights": {

"default": 500,

"light": 100,

"bold": 1000

},

"containerStyles": {

"default": {

"backgroundColor": "#ffffff",

"foregroundColors": {

"default": {

"normal": "#ffffff"

},

"white": {

"normal": "#ffffff"

},

"grey": {

"normal": "#5C6372"

},

"orange": {

"normal": "#f2B900"

},

"yellow": {

"normal": "#ffcb05"

},

"black": {

"normal": "#000000"

},

"lightGreen": {

"normal": "#93c0c0"

},

"green": {

"normal": "#54a254"

},

"red": {

"normal": "#dd1111"

},

"accent": {

"normal": "#2E89FC"

},

"good": {

"normal": "#54a254"

},

"warning": {

"normal": "#e69500"

},

"attention": {

"normal": "#cc3300"

}

}

}

},

"imageSizes": {

"default": 40,

"small": 40,

"medium": 80,

"large": 160

},

"imageSet": {

"imageSize": "medium",

"maxImageHeight": 100

},

"actions": {

"color": "#ffffff",

"backgroundColor": "#27A6A4",

"maxActions": 5,

"spacing": "none",

"buttonSpacing": 0,

"actionsOrientation": "horizontal",

"actionAlignment": "center",

"showCard": {

"actionMode": "inline",

"inlineTopMargin": 0,

"style": ""

}

},

"spacing": {

"default": 0,

"small": 5,

"medium": 10,

"large": 20,

"extraLarge": 0,

"padding": 20

},

"separator": {

"lineThickness": 1,

"lineColor": "#eeeeee"

},

"factSet": {

"title": {

"size": "default",

"color": "default",

"weight": "bold",

"warp": true

},

"value": {

"size": "default",

"color": "default",

"weight": "default",

"warp": true

},

"spacing": 20

},

"supportsInteractivity": true,

"imageBaseUrl": "",

"height": 77

}

[harikm007]

This is because the title is hidden. Is it okay to show title bar for this blox? If yes, remove the highlighted line of code.

Result:

-Hari

[rahuldhomane]

I removed the titlestyle, but here my aim is to lessen the height of the widget so that it sticks to the top and the vertical space is reduced.

Thanks,

Rahul

[harikm007]

Try this:

Add "z-index" in blox script as in below screenshot

And add below dashboard script to reduce height of widget

dashboard.on('refreshstart', function (se, ev) {

	widgetid = '633ac50185a029002e9a9753'
	
	$(`widget[widgetid="${widgetid}"]`).closest('.dashboard-layout-cell').height(40)
	
});

-Hari