The CreatorCon Call for Content is officially open! Get started here.

How to increase the size of VIP icon beside caller field

VIKAS MISHRA
Tera Contributor

As per the below screenshot if any user is VIP then one icon would be auto appear beside the caller field, but its currently not visible properly so want to increase its size, is it possible if yes then how.

function onChange(control, oldValue, newValue, isLoading) {
	var callerLabel = $('label.incident.caller_id');
	var callerField = $('sys_display.incident.caller_id');
	if (!callerLabel || !callerField)
		return;
	
	if (!newValue) {
		callerLabel.setStyle({backgroundImage: ""});
		callerField.setStyle({color: ""});
		return;
	}
	g_form.getReference('caller_id', vipCallerCallback);
}

function vipCallerCallback(caller) {
	var callerLabel = $('label.incident.caller_id').down('label');
	var callerField = $('sys_display.incident.caller_id');
	if (!callerLabel || !callerField)
		return;
	
	//check for VIP status
	if (caller.vip == 'true') {
		var bgPosition = "95% 55%";
		if (document.documentElement.getAttribute('data-doctype') == 'true')
			bgPosition = "5% 45%";
			
		callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
		callerField.setStyle({color: "red"});
	} else {
		callerLabel.setStyle({backgroundImage: ""});
		callerField.setStyle({color: ""});
	}
}

 

 

Above is the script which is being used to create that icon.

 

VIKASMISHRA_0-1689154367738.png

 

 

1 ACCEPTED SOLUTION

Please try this.

callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition,backgroundSize: "30px", paddingLeft: '30px' });

View solution in original post

16 REPLIES 16

Please try the below line, it should display the image in a decent way.

 

callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition,backgroundSize: "30px", paddingLeft: '30px' });

 

The original image was created with the less size and if you still think that it is not clear, then please consider creating a new image and using that image for the display.

 

Please mark the appropriate response as correct answer and helpful.

Thanks!!

Samaksh Wani
Giga Sage

Hello @VIKAS MISHRA 

 

Can you plz mark my Solution as Accept, I have also given the same response, it will help other users to reach the post here.

 

Regards,

Samaksh