Display Checkboxes Inline

[joy11]

I've created several dynamic forms with boolean checkboxes. I'm trying to get the checkbox to display inline with the label text because with multiple checkboxes it gets confusing for users as to which checkbox goes with what question. My issue is that I am unable to modify just the checkboxes because it seems that all of the fields and labels are created the same way. I was looking for where I could add a class to the labels related to only checkboxes but was unable to find that. Any idea where I could look to modify that? I'm already using a custom stylesheet.

[tanya]

Hello
In field view you have a getLabelElement method. And in afterRender method you can modify a label view.
If you want to modify all checkboxes in system, client/src/views/fields/bool.js
If you need it for some fields, override view for this field and extends 'views/fields/bool' https://www.espocrm.com/documentatio...nt-field-views

[joy11]

I know what class needs to be changed, but I don't know where to do that with the js views. The changes seem like they should be minor. These two changes on the checkbox class and the minor change to the stylesheet seem to preview just fine using developer tools. Do you have any hints or examples how I could modify the class on these?

[tanya]

better do this in field view with method method addClass
client/src/views/fields/base.js hide method as example

[joy11]

I modified the client/src/views/fields/bool.js (i'll probably save it as a custom once I get it working so I'm not breaking anything, but I do want it systemwide and I'm not sure how to apply it to the whole entity and not just the specific labels/fields.)

I added the following code:

afterRender: function () {

var $cell = this.getCellElement();
$cell.children('div').addClass('checkbox-inline');
$cell.children('label').addClass('checkbox-inline');
}

This seems to work well on most of the fields with my modification to the css.

[joy11]

I take that back. This breaks emailing from the system when applied to systemwide bool. I'll need to apply it only to the entities that I need it on. I'm sure it's because I had to add the class onto the div with class of field.

Is there a way to use one field view for an entire entity? I have forms which are 30-40 bool, so adding the view to each one isn't a great solution for me.


NOTE: I went in and tried to apply the view to individual checkboxes. This prevented saving of the form. The form looked great though! I had to scrap this project for now.