Adding Style to a MessageBox Dialog in Creatio

If you need to apply style to a messagebox dialog in Creatio, you’ll need to do a small hack that allows you to identify your specific messagebox in the markup so your CSS/style doesn’t apply to all messageboxes. If your dialog is a real dialog or a mini page, this hack isn’t needed since you can easily identify those in the markup and apply styles to it, but this isn’t the case with a generic messagebox, such as the one shown when using Terrasoft.showInformation, so you’ll need a hack like this to be able to identify your messagebox and not apply the styles to all messagebox dialogs.

Basically, before you show the messagebox, you’ll add a flag to the body, then unset the flag after the message box closes. This allows you to identify *your* specific dialog in the markup so you can apply styles to it.  Here’s a sample, we’ll create a messagebox with a lot of lines and then apply styles to make the text of the messagebox scroll instead of being really tall.

Here’s what the dialog looks like with results of this small hack and our styles applied, notice the scrolling text:

Here’s what it looked like originally:

To accomplish this, we need a unique way to identify our specific messagebox in the markup. To do this, before our messagebox opens, we’ll add my-tall-dialog=true to the body tag. Then we’ll set this back to false after the dialog closes. We’ll do this using Terrasoft.utils.dom.setAttributeToBody, then use the callback from when the messagebox closes to remove it. The code looks like this:

// add attribute to body indicating our messagebox is open
Terrasoft.utils.dom.setAttributeToBody("my-tall-dialog", true);
// show the messagebox
Terrasoft.showInformation("This is a message with a lot of text.\r\n\r\nLine1\r\nLine2\r\nLine3\r\nLine4\r\nLine5\r\nLine6\r\nLine7\r\nLine8\r\nLine9\r\nLine10\r\nLine11\r\nLine12\r\nLine13\r\nLine14\r\nLine15\r\n", function() {
    // now the dialog has closed, remove the attribute from the body tag
    Terrasoft.utils.dom.setAttributeToBody("my-tall-dialog", false);

Once we’ve done that, we now have a way to uniquely identify that our messagebox is open, and a way to apply styles to it. For this sample, my .less/css looks like this:

body[my-tall-dialog=true] {
	.ts-messagebox-box {
		height: 300px !important;
		.ts-messagebox-caption {
			max-height: 200px;
			overflow-y: scroll;
			background-color: #f9f9f9;
			border: 1px solid #eaeaea;
			margin-bottom: 6px;

Of course, you’ll need to add that css to the page this is all working on as well.


Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!