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

1
0
-1

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

1
0
-1

Here is the solution : http://community.bonitasoft.com/answers/default-size-text-area-widget

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.

Comments

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:

  1. textarea.descripcion {
  2. height: 100px;
  3. }

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.

  1. <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

Hi,

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

  1. .descripcion textarea{
  2. height: 100px;
  3. }
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,

Notifications