Changing Multi-line Text Labels to Top Alignment in Creatio (formerly bpm’online)

In Creatio, the default for field labels is middle alignment. This is all fine, but for multi-line text fields, this can look confusing to some users. The label will be aligned to the middle of the multi-line text field, but the cursor, or entered text will be aligned to the top of the textbox itself.

This is what this looks like by default, pay attention to the alignment of the labels:

The larger the multi-line text element is, the further the labels get from the top of the text it is for. This article will outline the steps to change this behavior to align the text labels to the top of the fields. The end result will look like this:

I think this looks nicer and is a bit more clear to end users since the label will nicely align to the top of the field it is for.

To accomplish this, we’ll need to apply a global style, so this will apply to *all* areas of the client, where ever there is a label for a field. For our style to apply to the entire application, we’ll need to add it to the BootstrapModulesV2 module. First, let’s create a module for our CSS.

For more info see Adding Custom CSS Style Sheets in Creatio (formerly bpm’online)

Create a new Module, then on the LESS tab, add the following:

/* fix field label alignment so multi-line labels align to top instead of middle */ 
.header-container-margin-bottom .label-wrap, .grid-layout .label-wrap {
    align-items: normal;
}
.header-container-margin-bottom .label-wrap, .grid-layout .label-wrap label {
    position: relative;
    top: 5px;
}

Name it something like UsrGlobalStylesCSS. Now, we’ll create a replacing module for BootstrapModulesV2. The code, you’ll add to this replacing module will look like this (the main part here is where we add reference to the CSS module we created):

define("BootstrapModulesV2", ["css!UsrGlobalStylesCSS"], function() {
    return {};
});

That is it, now all multi-line text labels will be top aligned. Additionally, you can now use this CSS file to apply CSS styles to the entire client application as well.