Page 1 of 1

FormBuilder radio button and checkbox css

Posted: Mon Feb 15, 2021 3:36 pm
by cjcollen
I am using CMSMS 2.2.13 and FormBuilder 1.1

I have noticed that in FB when I set up either a radio button group or checkbox field and set the CSS Class field in the advanced settings tab, this is not rendered with the control on the form.

The text input type does take this setting onto the rendered input tag.

Is this a little bug, perhaps?

Also, if I create the input tag for either the radio button or check box manually, using the name and id props from the FB settings, when I submit the form which has validation errors, the form does not remember the value of the radio button or check box. The text inputs do.

I compared my manually-built input tag for radio button / checkbox to the one generated by FB and it is identical. But the manually-built one does not remember what was selected. Is this another bug?

Here is what the 2 input tags look like for check box:

Generated by FB but class is not being taken from the CSS Class field :

Code: Select all

<input type="checkbox" class="cms_checkbox" name="mdf4e5fbrp__37" value="t"  id="fbrp__37" />
Manually-built but field does not remember its selection after submit button sent and errors detected:

Code: Select all

<input type="checkbox" class="w3-check" name="mdf4e5fbrp__37" value="t" id="fbrp__37">

Re: FormBuilder radio button and checkbox css

Posted: Mon Feb 15, 2021 4:44 pm
by cjcollen
I had a delve into the inner workings of FB and it looks like the CSS Class field is not used in the code which generates the input tag.

In class.formbuilder_utils.php, the function create_input_checkbox (lines 185-209) has this code:

Code: Select all

$text = '<input type="checkbox" class="cms_checkbox" name="'.$id.$name.'" id="'.$cssid.'" value="'.$value.'"';
where the class prop is explicitly set.

Likewise for the text input generator (function create_input_text at line 167) and in the RadioGroupField.class.php.

Re: FormBuilder radio button and checkbox css

Posted: Tue Feb 16, 2021 8:37 am
by Rolf
Thanks for looking into this!
Can you create a bug report so we can fix this for the next FB release?
http://dev.cmsmadesimple.org/bug/list/69

Grtz. Rolf

Re: FormBuilder radio button and checkbox css

Posted: Tue Feb 16, 2021 8:51 am
by cjcollen
Thanks for looking into this!
Can you create a bug report so we can fix this for the next FB release?
http://dev.cmsmadesimple.org/bug/list/69
Yep, will do. I am in the process of working the hack to the 2 class files and will suggest that in the bug thingy.

Re: FormBuilder radio button and checkbox css

Posted: Tue Feb 16, 2021 6:07 pm
by cjcollen
I have raised 2 separate bug reports for this as follows:

http://dev.cmsmadesimple.org/bug/view/12416

http://dev.cmsmadesimple.org/bug/view/12417

Re: FormBuilder radio button and checkbox css

Posted: Wed Feb 17, 2021 1:06 pm
by Rolf
I replied to your reports:
Thanks for your report and fix suggestion, we have looked into it.

The current situation works though but in a different way… The provided class is
added to a wrapper div and *not* to the input field itself. Changing this would
probably break the styling at other sites.
It is as design as per the original developer intentions, and we are refactoring
the field PHP classes for future versions to not only make FormBuilder more
versatile, but also keep backwards compatibility as much as possible.
So we won't fix it at the moment as there are ways to work around that in the
template and stylesheet without having to hack the PHP code, in example:

.provided_class input[type="checkbox”] { ... }

See also https://cmscanbesimple.org/blog/styling-forms

Re: FormBuilder radio button and checkbox css

Posted: Wed Feb 17, 2021 4:49 pm
by cjcollen
Thanks for speedy response, Rolf.

And thanks for pointing me to the formbuilder stylesheet from the CMS Can Be Simple site. I have reinstated the 2 class files in my local server and put in the formbuilder css class for the radio and checkbox inputs, and all works as expected. PHEW!

So my 2 hacks were a futile exercise BUT a prorgramming challenge nonetheless and it whiled away a few hours as a welcome distraction in this UK lockdown.

Keep safe and sane

Re: FormBuilder radio button and checkbox css

Posted: Wed Feb 17, 2021 5:08 pm
by Jo Morg
Rolf wrote: Wed Feb 17, 2021 1:06 pm So my 2 hacks were a futile exercise BUT a prorgramming challenge nonetheless and it whiled away a few hours as a welcome distraction in this UK lockdown.
There is nothing futile when we dig into the code, we always learn how to do something and sometimes how not to do something... :)
In addition to Rolf's post: this is the issue with old modules that hardcoded most of the HTML logic into the PHP, there was less versatility, or if it was there, it was not obvious how to go about it...
In future versions we are going to move away from hardcoded HTML in the PHP classes and move it all to templates, either in form of field Smarty resources, or just full templates (as I use most of time). I use just the {$fieldalias->fieldname} and a few other Smarty variables made available to the templates from FormBuilder and style the forms to my needs. Some times is a bit of extra work other times it's just what the doctor ordered.