cancel
Showing results for 
Search instead for 
Did you mean: 

Fix Blox widget height for JTD button

rahuldhomane
10 - ETL
10 - ETL

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 

6 REPLIES 6

rahuldhomane
10 - ETL
10 - ETL

Hi, 

@harikm007  can you please help me on this request?

Hi @rahuldhomane ,

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

-Hari

--------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
}

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.

harikm007_0-1664372712593.png

Result:

harikm007_1-1664372772277.png

-Hari

 

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

Try this:

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

harikm007_0-1664796751907.png

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