Integrating bootstrap classes on Cake helpers?

Need Help
1

I feel like this should be absolutely supported and trivial but it’s looking impossible as far as I can see.

The issue:

  • I’m using Bootstrap
  • Bootstrap requires “opt in” classes be used for things like a form control (and its wrapper).
  • The most direct way to apply these classes, would be for me to add them individually to each and every form control used. This is more onerous than I would like… and it just adds more visual clutter to my view.

A better way, ostensibly, is to use a custom form helper template. I figured out how to do this (as usual, documentation was pretty terrible on this matter). BUT…
It turns out when I do something like this:
'input' => '<input type="{{type}}" class="form-control" name="{{name}}"{{attrs}}/>',
I am no longer able to add one-off classes to my form control attributes in the view. This:
<?= $this->Form->control('name', ['class'=>'something']);?>
fails silently. The “something” class just doesn’t get incorporated into the full class declaration for the input.

Am I doing it wrong?

2

Hello,

I also use bootstrap but i always use the $option array from $form->control to
add class based styling. I just override some (5!) standard form helper template stuff for layout ordering.

By the way: I agree with you statement about the documentation - especially the list of the template
standards is in the 4.x API Documentation missing. When I adjusted the form helper template a used cakephp 3.x
And in the 3.8. API documentation the list can be found here: Class Cake\View\Helper\FormHelper | CakePHP 3.8
And this works in 4.x as well…my App is on 4.2 now.

As I understand how CakePHP works in case of your observed behavior is the following:
All additional attributes of a tag from the $option array is added into the template placeholder {{attrs}}
In your case the [‘class’=>‘something’].
So I guess - If you look into your generated code you will finde the “class”-attribute twice in the tag:

And this is not HTML standard. At the moment I do not know how browser handle that, or how the HTML standard says.
But this could be the problem.

My advice: Do not change the the form helper template (for that). You can create view elements (Views - 4.x)
for your input tags if you do not want to add the bootstrap classes again and again in the view templates.

Or look at this plugin: GitHub - FriendsOfCake/bootstrap-ui: CakePHP: Transparently use Bootstrap found here: GitHub - FriendsOfCake/awesome-cakephp: A curated list of amazingly awesome CakePHP plugins, resources and shiny things.

1 Like
3

The FriendsOfCake package looks appealing. However, it requires CakePHP 4. I’m on 3.9 atm. I had given up on 4.x thinking it broken, but now I’m not sure 3.9 was the answer either. But here I am, already developing on 3.9, so I’m inclined to stick with it for now and upgrade later perhaps.

WHAT I DECIDED:

I’m using scss @extend in the following fashion:

	input:not(.bs-opt-out) {
		@extend .form-control;
		@extend .form-control-lg;
		&:hover {
			box-shadow: 0 0 5px $blue;
		}
	}

So this opts in, by default, on every single input (and I did similar things for buttons, submits, selects, etc).

In the rare case where I don’t want the bootstrap styling, I simply add bs-opt-out as a class and it kills the opt in.

This seems to be working great.

4

I should note, I did keep one edit in app_form.php:

<?
	return [
    'inputContainer' => '<div class="form-group">{{content}}<small class="form-text text-muted">{{help}}</small></div>',

];
5

You can use the 2.x versions that require cakephp >=3.7

Also you have Holt59/cakephp3-bootstrap-helpers which is a pretty nice drop-in for the default helpers.

6

Thank you.

I’m on Bootstrap 4.5.3 and looking to move to 5 asap (waiting on a bootstrap plugin to support 5).

As far as I can tell, none of the packages support 3.9 and 4.5 (let alone 5)