Merge borders for multiple widgets

[abhinavt]

Hello, 

I'm trying to merge borders for multiple widgets. Lets say if I have two widgets I know I can customize each widget's border style using the below script ,but is there a way to only have 4 borders for 2 widgets instead of 8. TIA

dashboard.on('widgetready', function(sender, ev){
	widgetlist = ['5sd2c75601eafb7y02d4bce89', '61r4d1fb65c615646ee3t523']
	
	$.each(widgetlist, function(index, value){
		widgetelement = $('[widgetid = "' + value + '"]', element)
		widgetelement.css('border', '10px solid #000')
		widgetelement.css('border-radius', '15px')
	})
})

[DRay]

Hello @abhinavt.

Hello ,

Thank you for your question. I see that this hasn't had a response yet, so I am reaching out internally to try and get you an answer. 

[TriAnthony · Accepted solution]

Hi @abhinavt,

You can modify the top/bottom/left/right border configurations to achieve that.

Here's the updated script for one border surrounding two widgets:

dashboard.on('widgetready', function(sender, ev){

	widgetlist = ['5sd2c75601eafb7y02d4bce89', '61r4d1fb65c615646ee3t523']

	//widget border configurations
	$.each(widgetlist, function(index, value){
		
		widgetelement = $('[widgetid = "' + value + '"]', element)
		widgetelement.css('border-top', '10px solid #000')
		widgetelement.css('border-bottom', '10px solid #000')
		
		//left widget
		if(index == 0) {
			widgetelement.css('border-left', '10px solid #000')
			widgetelement.css('border-top-left-radius', '15px')
			widgetelement.css('border-bottom-left-radius', '15px')
		}

		//right widget
		else if(index == 1) {
			widgetelement.css('border-right', '10px solid #000')
			widgetelement.css('border-top-right-radius', '15px')
			widgetelement.css('border-bottom-right-radius', '15px')
		}

	})
})

[dami1]

Hi @TriAnthony , thanks for this recommendation. Do you know if there is a way to connect multiple widgets with a border if the Spacing Between Widgets is set to Medium in the Sisense look and feel settings? 

This recommendation doesn't work if the widgets are set to have medium spacing in the look and feel.

Thanks,

Dami

[TriAnthony]

Hi @dami1, I'm sorry for the delay.

You can override the widget styles (including spacing and corner radius) in each individual widget's settings (under the Design tab). In this case, you can set both Space Around and Corner Radius to none for the two widgets you are merging. See screenshot below for reference.

This is how the two widgets look like after making those changes. You can see that even though there are spaces between the bottom three widgets, there isn't any for the two widgets at the top.

[abhinavt]

Thank you so much TriAnthony and DRay. The script worked for me!

[DRay]

Thank you for the update. I'm glad it worked!