Positioning control-fields side by side unlike one underneath the other in view

#1

It seems that by default control-fields created by “$this->Form->control()” are positioned one underneath the other.
How can they be positioned side by side instead? Changing style-option to “display:inline” in the option-array of the control-field doesn’t help.

0 Likes

#2

I usually go with twitter bootstrap for my CSS, and I customise the HTML templates the Form helper uses here: https://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses

I find I can have pretty any layout I like with the help of the CSS grid system.

Of course, the built in CSS framework will have a similar layout mechanism. Use whatever you find easiest to work with.

0 Likes

#3

If you want to use the built-in CSS framework (Foundation 5), see the Inline Labels section here: https://foundation.zurb.com/sites/docs/v/5.5.3/components/forms.html, and use $this->form->label() with a specific control (see "https://book.cakephp.org/3.0/en/views/helpers/form.html#creating-text-inputs)

0 Likes

#4

Thanks so far.
So if i see it correctly CakePHP itself uses the framework Foundation 5 as built-in component.
In which folder of the CakePHP-skeleton can it be found then?

0 Likes

#5

The Foundation 5 CSS is included in base.css. Some Foundation features also require the Foundation Javascript library, like TopBar for example. That’s not installed in CakePHP by default, so you need to get it from the Foundation web site or install with Composer, copy into your webroot/js, and then include from your page or a layout.

0 Likes