How to use CSS in BONITA 7? How to modify the height of a text widget or input widget?


Please, I need to modify the height of a text widget.

How to create a class in CSS and use it in UI Designer? This example doesn't work.

1 answer


Here is the solution :

EDIT : This answer is for Bonita 6. I didn't read that your question is for Bonita 7. For Bonita 7 I think you need to use the CSS field.


Submitted by vilcholo on Mon, 07/27/2015 - 15:18

Thank you Yannick. I tried creating a CSS Asset like this , but it doesn’t work. However I tried the following method: To create a CSS Asset like this:

textarea.descripcion {
  height: 100px;

In UI Designer select the textarea widget and stablish the "CSS classes" property to "descripcion" (also tray "textarea descripcion"). It doesn't work but if I press F12 and add the class "descripcion" manually and it works fine.

<textarea name="pbTextArea0" class="form-control descripcion ng-pristine ng-untouched ng-valid ng-valid-minlength ng-valid-maxlength ng-valid-required" ng-readonly="properties.readOnly" ng-maxlength="" ng-minlength="" ng-required="properties.required" ng-model="properties.value"/>

Somebody know how to use CSS in BONITA 7?

Thank you. Best regards,

Submitted by Quentin Choulet on Tue, 07/28/2015 - 16:54


Did you try to launch the process and see if it works ? The preview in the UI-Designer is kind of broken

Submitted by vilcholo on Tue, 07/28/2015 - 19:47

Hello, Yes, I did. It doesn't work.

Thanks for your reply. Regards,

Submitted by Quentin Choulet on Wed, 07/29/2015 - 09:20

Well, I don't know what could be wrong in your case. I am using the css field to add custom classes to a title in my current project and it works. Did you save the form ? (yes I know it's a stupid question but maybe you have forgotten to do so) Did you redeploy the process ? Every time you make a change in the UI-Designer you have to redeploy the process by hitting "Run" in the Studio.

If the class still doesn't appear on the element when you inspect it, it's probably a bug.

Submitted by vincent.elcrin on Thu, 07/30/2015 - 00:12

Hi, Asset is the way to go. The issue is that the CSS applied using the CSS property is not applied to the textarea element directly but to a div wrapping the widget. Update your CSS selector as follow and it should work

.descripcion textarea{
  height: 100px;
Submitted by vilcholo on Thu, 07/30/2015 - 19:38

Thank you very much Vincent, this is the way to create a new CSS class for a textarea. It works fine. Regards,