FormBuilder radio button and checkbox css Topic is solved

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
cjcollen
Forum Members
Forum Members
Posts: 36
Joined: Sat Aug 04, 2018 4:20 pm
Location: Shropshire, UK

FormBuilder radio button and checkbox css

Post 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">
cjcollen
Forum Members
Forum Members
Posts: 36
Joined: Sat Aug 04, 2018 4:20 pm
Location: Shropshire, UK

Re: FormBuilder radio button and checkbox css

Post 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.
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: FormBuilder radio button and checkbox css

Post 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
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
cjcollen
Forum Members
Forum Members
Posts: 36
Joined: Sat Aug 04, 2018 4:20 pm
Location: Shropshire, UK

Re: FormBuilder radio button and checkbox css

Post 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.
cjcollen
Forum Members
Forum Members
Posts: 36
Joined: Sat Aug 04, 2018 4:20 pm
Location: Shropshire, UK

Re: FormBuilder radio button and checkbox css

Post 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
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: FormBuilder radio button and checkbox css

Post 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
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
cjcollen
Forum Members
Forum Members
Posts: 36
Joined: Sat Aug 04, 2018 4:20 pm
Location: Shropshire, UK

Re: FormBuilder radio button and checkbox css

Post 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
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1922
Joined: Mon Jan 29, 2007 4:47 pm

Re: FormBuilder radio button and checkbox css

Post 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.
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!
Post Reply

Return to “Modules/Add-Ons”