Styling formbuilder formcontrols depending on the layout

General
1

Again, I’m to dumb to get formcontrols styled for a specific formlayout for a formbuilder form.

What I did:

  • a file views/formbuilder/layouts/form/tailwind.cfm for the form.
  • a file views/formbuilder/layouts/formfield/tailwind.cfm for the formfields.

What I need is to style the individual formfield. In my case: the Select field.

I tried two things:

  1. a file views/formcontrols/select/tailwind.cfm
  2. a file views/formbuilder/layouts/formfield/select/tailwind.cfm

I’m not able to style my formbuilder formcontrol select to the layout I want. I can’t figure out what I miss. Any idea?

Thanks
Michi

2

I take it this is following the guide here: Preside Documentation :: Form Builder styling and layout ?

I haven’t used these really. My memory/understanding is that by implementing layouts, you are able to choose them as options in your form + form field configurations through the user interface. If you can’t, then that is a bug I think (and perhaps a forgotten feature).

3

Yes, this is the docu I got it from.
My understanding was I can modify the formcontrol itself, but I always have the ready renderered control in args.control.

in my case I have a website based on tailwind.css and not on bootstrap and need to do some modifications based on the selected layout (yes, tailwind is awesome, but by far not as easy as bootstrap).
And yes, it looks more like a forgotten feature.

4

If you need to override the form layout and form field layout for all controls, does overriding the views at the following locations work:

  • /views/formbuilder/layouts/form/default.cfm
  • /views/formbuilder/layouts/formfield/default.cfm

?

5

I need to overwrite the formcontrol, not the field layout.
field layout is no problem, but this doesn’t help in this case.

But saying this, I read the docu and interpreted as like I can create a views/formbuilder/layouts/formfield/select/tailwind.cfm and change the formcontrol.

And while I’m writing these lines, my approach was maybe wrong. Maybe I can do this via the file mentioned above.

Will try.

6

Aha I see. So, you probably want/need to override/implement a “formbuilder” context for the select control: /views/formcontrols/select/formbuilder.cfm

Form builder item types (at least the core ones) delegate to form controls and specify the “formbuilder” context. If no formbuilder specific viewlet exists for the formcontrol - the system will fall back to the default “index” one.

This way, you can overwrite the implementation without affecting the admin form controls.

Tip: when rendering custom forms in the frontend, use a context like “website” so that you can also provide “website” context renderings for your form controls:

#renderForm(
    // ...
    , context = "website" // each form control render will try to use a "website" version if available
)#
1 Like