How do I set default alignment for horizontal controls in Bootstrap-UI 3 for CakePHP 4?

Question

This is a particularly obscure question about the Boostrap-UI plugin for CakePHP but I'm hoping someone might be able to help.

I’m using Bootstrap-UI (https://github.com/FriendsOfCake/bootstrap-ui) version 3.0, so using Bootstrap 4.6.

I’m trying to create a form that has controls that are aligned horizontally with their labels using the example from the readme here -

This works fine except I can’t see how to define the default column distribution ie so that the classes for the label and the control container are something like col-4 and col-8 without any breakpoint defined.

If I try something like -

              'align' => [
                'left' => 4,
                'middle' => 8,
              ]

The classes created are col-md-4 and col-md-8 ie it seems to default to md as the breakpoint for the columns.

I know this is a bit obscure but does anyone have any idea how to do what I want?

Answer 1

AFAICT that's currently not supported, meaning you can only generate the default mb breakpoint ones, or specify breakpoints yourself.

You can open an issue over at GitHub for a feature request. As a workaround you could extend the plugin'S form helper and overwrite FormHelper::_gridClass() to modify the generated classlist, something along the lines of this, which would remove the default breakpoint from the generated class string:

namespace App\View\Helper;

class FormHelper extends \BootstrapUI\View\Helper\FormHelper
{
    protected function _gridClass(string $position, bool $offset = false): string
    {
        return str_replace('-md', '', parent::_gridClass($position, $offset));
    }
}

public function initialize(): void
{
    parent::initialize();

    $this->initializeUI();

    $this->helpers['Form'] = [
        'className' => \App\View\Helper\FormHelper::class
    ];
}

See also https://book.cakephp.org/4/en/views/helpers.html#creating-helpers