echo $this->Form->input('gender', ['type' => 'radio', 'options' => ['Male', 'Female']]);

The radio button appears twice per value

I've updated my composer today and got these versions:

  - Updating cakephp/cakephp dev-master (1014b09 => 3a3de18)
    Checking out 3a3de18ca3ed7da0fe16daeee186281e7c033309

  - Updating friendsofcake/bootstrap-ui dev-master (7cc5142 => 3c87f0f)
    Checking out 3c87f0f9e187a6c93b584e6ca13e37e2537c974b

I've started getting a fatal error line 55 from the FlashHelper then: unsupported opperand type line 55 The line in question is this:

$flash['params'] += $this->_config;

I've started debugging this and found out that $flash is now an array of flash messages. I'm not sure how to fix it properly. My guess is that a foreach is needed and the config needs to be merged for reach of the flashes?

The help block for error messages should be within the input column div tag when generated for horizontal forms.

The currently generated code looks like this:

<div class="form-group required has-error">
    <label class="control-label col-md-2" for="field">Field</label>
    <div class="col-md-10">
        <div class="input-group">
            <input type="number" name="field" required="required" id="field" class="form-control " value="">
        </div>
    </div>
    <p class="help-block">Error message</p>
</div>

It should be like this:

<div class="form-group required has-error">
    <label class="control-label col-md-2" for="field">Field</label>
    <div class="col-md-10">
        <div class="input-group">
            <input type="number" name="field" required="required" id="field" class="form-control " value="">
        </div>
        <p class="help-block">Error message</p>
    </div>
</div>

I have improved this file in my project ,using a table of two columns to show the keys and values of the item.
I wonder if you are interesting in making a PR of this.

I just started testing and I think it would be nice if the default layout has some sort of condition that, when set, downloads the default css and js from cdn.

This way new users can quickly get up and running with nice visuals without manually having to setup these assets first.

If this sounds reasonable I will create a PR, suggestion on where to set the option would be appreciated.

Loading a template config file (e.g. config/search_templates.php) is currently broken in 0.3.0:

echo $this->Form->create(null, ['type' => 'get', 'class' => 'search', 'templates' => 'search_templates']);

results in

Error: Unsupported operand types 
File /var/www/html/vendor/friendsofcake/bootstrap-ui/src/View/Helper/FormHelper.php 
Line: 367

Temporary work-around is to load the template file after create with

$this->Form->templates('search_templates');

This may be the best course of action to fix the problem.

#31 makes the default date(time) work in Cake just fine.

But in general, we should have the option to switch to a text field with datepicker support, e.g. using http://eonasdan.github.io/bootstrap-datetimepicker/
This could be done using a custom datetime widget, I guess, which then just requires the necessary JS files to be included (manually) to work.
Settings for localization and stuff will need to be optionized somehow, though.

Well, the title says it all. :)

The symlinks ( https://github.com/FriendsOfCake/bootstrap-ui/tree/master/src/Template/Element/Flash ) should be resolved using elements.

Otherwise this will break on WIN plattforms.

When loading helpers in View\AppView I get the following error:
Fatal error: [Cake\View\Exception\MissingHelperException] Helper class HtmlHelper could not be found

When I call:

echo $this->Form->input('some.thing', [
        'options' => $input_options,
        'class' => 'testclass'
]);

Opening tag looks like this, which confuses at least some browsers (chrome):

<select class="form-control" name="some[thing]" class="testclass form-control">

And I think that it should look like this:

<select name="some[thing]" class="testclass form-control">

I think that problem is in select template as StringTemplate::_compiled['select'] contains following:
See View/Helper/FormHelper.php#L39

<select class="form-control" name="%s"%s>%s</select>

And data attrs contains:

class="testclass form-control"

The following code generates a warning:

echo $this->Form->input('field', ['append' => '%']);

This is the warning:

Warning (2): vsprintf(): Too few arguments [CORE\src\View\StringTemplate.php, line 216]

Possible solution: Escape % characters before passing strings to vsprintf()

Radio buttons are not displayed correctly with horizontal layout.

Example:

$this->Form->create($user, ['align' => [
    'sm' => [
        'left' => 6,
        'middle' => 6,
        'right' => 12
    ],
    'md' => [
        'left' => 4,
        'middle' => 4,
        'right' => 4
    ]
]]); 

echo $this->Form->input('group_id', ['type' => 'radio', 'options' => ['Admin', 'User']]);

Produces this code:

<div class="form-group">
  <div class="col-sm-offset-6 col-md-offset-4 col-sm-6 col-md-4">
    <div class="radio">
      <label class="control-label col-sm-6 col-md-4">Group</label>
    </div>
  </div>
</div>

Running the same code with bootstrap-ui form helper disabled will produce the correct HTML:

    public $helpers = [
        'Html' => ['className' => 'BootstrapUI.Html'],
        //'Form' => ['className' => 'BootstrapUI.Form'],
        'Flash' => ['className' => 'BootstrapUI.Flash'],
        'Paginator' => ['className' => 'BootstrapUI.Paginator'],
    ];

<div class="input radio">
  <label>Group</label><input type="hidden" name="group_id" value="">
  <label for="group-id-0">
    <input type="radio" name="group_id" value="0" id="group-id-0">Admin
  </label>
  <label for="group-id-1">
    <input type="radio" name="group_id" value="1" id="group-id-1">User
  </label>
</div>

Is there a way to get bootstrap-ui to render radio buttons correctly within horizontal layouts?

When using $this->Form->input('admin') I get the following HTML output:

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="hidden" name="admin" value="0">
        <label for="admin">
            <input type="checkbox" name="admin" value="1" id="admin" class="form-control">
            Admin
        </label>
    </div>
</div>

When I should be getting:

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <div class="checkbox">
            <label>
                <input type="hidden" name="admin" value="0"><input type="checkbox" name="admin" value="1"> Admin
            </label>
        </div>
    </div>
</div>

Bootstrap-UI is working flawlessly with me, except when I use ajax, for instance Ajax Pagination.

Why am I saying this? Because if I set a paginator template it will work when the page is first rendered, but in the following ones I get the default template. The same happens with BootstrapUI.Form (if there are forms inside the pagination).

I noticed that the ajax is ignoring the $this->loadHelper(); instanced in AppView::initialize().
But if I manually set public $helpers into the AppController they will load. So seems that it is not merging into the default configuration, or am I missing something?

I know that this is a CakePHP 3 related question, not a Bootstrap-UI but since I think that other users may also have the same question.

Later I will add the answer to the main CakePHP 3 Docs.

When using bake with the provided templates, in the resulting templates the forms generated via FormHelper::postLink() are duplicated for usage in the navbar and the sidebar? These forms rely on a unique ID to be successfully posted, which doesn't work any more:

Uncaught TypeError: document.post_569e5bd99a06c486556933.submit is not a function

It would be nice if you would provide a working default here. The obvious solution would be to simply duplicate the content for the sidebar instead of reassigning them, but this produces a lot of unneeded boilerplate. Maybe there's an even more elegant solution?

Hi, I'm new to CakePHP. I've followed the instructions, but I don't have the proper layout. I've copied the layouts from your examples folder and transferred them to src/Template/Layout/TwitterBootstrap, and extended a view to try it out but the layout did not change. I also tried to replace CakePHP's ../Layout/default.ctp with bootstrap-ui's default.ctp and still nothing. What am I missing?

Edit: also when I inspect element, it looks right, as it uses the bootstrap's style sheet and script, along with Jquery's.

As per in the read-me, I download the plugin using composer and loaded the plugin using Plugin::load('BootstrapUI');

As soon as I add the following lines in AppView.php,

   $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
   $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
   $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
   $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);

it throws the error Helper Class xxxxx could not be found

Latest Version : Cakephp & Bootstrap-UI.

What's best way to extend the included FormHelper templates? For instance if I wanted to add a custom dateFormGroup and dateWidget.

I realize I can handle like this at view level, but I'd prefer to change app wide:

   $templates = [
        'dateFormGroup' => '{{label}}<div class="col-md-8"><div class="input-group date">{{input}}{{error}}{{help}}</div></div>',
        'dateWidget'    => '<input type="text" class="form-control" name="{{name}}" {{attrs}} /><span class="input-group-addon"><span class="fa fa-calendar"></span></span>'
    ];
    $this->Form->templates($templates);

I suggest to remove the lines:

if (empty($this->layout) || $this->layout === 'default') {
    $this->layout = 'BootstrapUI.default';
}

from initializeUI() in the UIViewTrait, because doing so you kind of force the user to create another template name and set it into its own AppView.
Or change the method to support some args and then enable, like:

public function initializeUI(array $args)
{
    if ($args['useBsLayout'] && (empty($this->layout) || $this->layout === 'default')) {
        $this->layout = 'BootstrapUI.default';
    }
}

and inside your AppView you pass what you need: $this->initializeUI(['useBsLayout' => true]);.
=)

I just noticed the packagist version is pointing at an outdated version. Could it be the update hook is not active?

The following code <?= $this->Form->button('Signup', ['class' => 'success'])?> would produce the following HTML, <button class="btn-success btn" type="submit">Signup</button>. This is expected.

But the following code <?= $this->Form->button('Signup', ['class' => 'primary'])?> would produce the following HTML, <button class="primary btn" type="submit">Signup</button>. This is not expected in my opinion, rather we should see the css class btn-primary added as btn-success was added above.

It seems adding 'primary' to $_styles in the ButtonWidget would correct this issue, and would give the expected behavior, and allow consistent use of the button widget, and allow the use of standard classes for buttons with Bootstrap.

Hello!

If there are more than one errors on an input field, FormHelper puts <ul> inside <p> which is not valid html5 code. This leads to ugly and problematic thinks like Chrome closing the <p> tag automatically before the list and adding another <p></p> after the list like this:

<p class="help-block"></p>
<ul>
    <li>This field is required</li>
    <li>Please provide an email address!</li>
</ul>
<p></p>

I suggest to replace <p> with <div> in $_templates = ['error'] in FormHelper.php:

<div class="help-block">
    <ul>
        <li>This field is required</li>
        <li>Please provide an email address!</li>
    </ul>
</div>

Bootstrap only defines .help-block so this change should not break anything.

Same applies to help template.

Bernhard

When we set align property in form create, by default textbox and textarea width depends on that property value. Is it possible to set different width for different textbox and textarea for same form?

I try dashboard theme in my app. But pagination design like below. (Out of alignment)

Is this my mistake or default design? I use default dashboard theme and default baked template.

My index.ctp code is below.

<div class="paginator">
    <ul class="pagination">
        <?= $this->Paginator->prev('< ' . __('previous')) ?>
        <?= $this->Paginator->numbers() ?>
        <?= $this->Paginator->next(__('next') . ' >') ?>
    </ul>
    <p><?= $this->Paginator->counter() ?></p>
</div>

Chrome, firefox, safari are same.

As there is a repo for it on Packagist.
https://packagist.org/packages/twbs/bootstrap

Should the plugin either require it, or suggest it and provide a shell task to symlink the resources into the webroot/css folder?

I can't use BootstrapUI FlashHelper along with Crud flash messages.
Maybe is more an issue of Crud plugin, but with this change plugin should work out of the oven after installing them with composer.

if (is_array($flash['params']['class'])) {
    $flash['params']['class'][] = 'alert-' . $class;
}

if (is_array($flash['params']['class'])) {
    $flash['params']['class'][] = 'alert-' . $class;
} else {
    $flash['params']['class'] = 'alert alert-' . $class;
}

Let's discuss first before I create a PR for that. Any inputContainer gets an additional class {{type}} as you can see here: https://github.com/FriendsOfCake/bootstrap-ui/blob/master/src/View/Helper/FormHelper.php#L61

Bootstrap doesn't require this class, so I think it shouldn't be a part of the BootstrapUI plugin. The additional class makes it more complicate to include libraries like https://github.com/flatlogic/awesome-bootstrap-checkbox.

With additional {{type}} class:

Without additional {{type}} class:

For sure I need to override the RadioWidget from BootstrapUI anyways to get this working and sure I can also override the inputContainer template but it wouldn't be necessary if we stick to the Bootstrap conventions what the idea of the plugin is I think.

The baked Template has tb_sidebar area, But BootstrapUI has no $this->start('tb_sidebar');. So we must add this own. And we must add css for this parts.

Should you add this to default ?

Please think this problem.

This is a (multiple allowed):

• bug
• enhancement
• feature-discussion (RFC)
• bootstrap-ui Version: 0.04
• Target: CakePHP 3.2.3

What you did

Installed the bootstrap-ui in a project using cells.

Expected Behavior

Cells should render forms and other elements.

Actual Behavior

Cells were rendered with contents from BootstrapUI.default

The UIViewTrait forces layout usage

        if (empty($this->layout) || $this->layout === 'default') {
            $this->layout = 'BootstrapUI.default';
        }

I think the problem is that empty($this->layout) is greedy. When cells are rendered the CakePHP framework assigns $this->layout = false but then bootstrap-ui sets the layout anyway.

Error: Unsupported operand types vendor\friendsofcake\bootstrap-ui\src\View\Helper\FlashHelper.php 

I think the 3.1 flash messages have more nesting and therefore break with the current bootstrap plugin.

As requested. Please consider implementing these additions so generated forms will support validation feedback out-of-the-box.

Feedback icons

To add optional feedback icons support the "has-feedback" class has to be added to (only the) textual input elements with class "form-control".

Vertical

HTML example from the Bootstrap 3 page:

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

Working CakePHP generated example:

<div class="form-group has-error has-feedback">
    <label class="control-label" for="url">Url</label>
    <input name="url" required="required" id="url" class="form-control" type="text">
    <span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
</div>

Produces something like this:

please note: that checkbox should not have the "has-feedback" class.

Horizontal

The horizontal form needs a slightly different layout, as shown in the Bootstrap code below:

  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>

Currently generated CakePHP code:

<div class="form-group has-feedback has-error">
    <label class="control-label col-md-2" for="url">Url</label>
    <div class="col-md-10">
        <input name="url" required="required" id="url" class="form-control" type="text">
    </div>
    <span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
</div>

Now produces something like:

Help block

In the images above the Bootstrap "help-block" span element is used to display the validation messages. I think adding an empty span by default would be a nice addition too (so they only have to be filled using JS, not created).

Vertical

Working CakePHP generated example:

<div class="form-group has-error has-feedback">
    <label class="control-label" for="url">Url</label>
    <input name="url" required="required" id="url" class="form-control" type="text">
    <span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
    <span class="help-block">
        <ul class="list-unstyled">
            <li>A minimum of 10 characters is required</li>
            <li>A valid email address is required</li>
        </ul>
    </span>
</div>

Horizontal

Currently generated Cake code::

<div class="form-group has-feedback has-error">
    <label class="control-label col-md-2" for="url">Url</label>
    <div class="col-md-10">
        <input name="url" required="required" id="url" class="form-control" type="text">
    </div>
    <span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
    <span class="help-block">
        <ul class="list-unstyled">
            <li>A minimum of 10 characters is required</li>
            <li>A valid email address is required</li>
        </ul>
    </span>
</div>

Horizontal checkbox

The horizontal checkbox is not generated as shown on the Bootstrap pages.

This could be due to the generated html but.... somehow removing the form-control class also seems to solve the issue.

Bootstrap example code:

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>

Currently generated Cake code:

<div class="form-group has-feedback">
    <div class="col-md-offset-2 col-md-10">
        <input name="force" value="0" type="hidden">
        <label for="force">
            <input name="force" value="1" id="force" class="form-control" type="checkbox">Force
        </label>
    </div>
</div>

http://getbootstrap.com/css/#forms-inline

Looks like generating class="form-horizontal" should in fact be class="form-inline" for Bootstrap 3.

Hello,

it seems to me that the Form-Element 'textarea' is not implemented!?

Regards,
cls

So this folder structure is mainly for the files on the plugin users end in the cake webroot folder. Actual file names are inaccurate. The current file structure doesn't allow fonts to work automatically in this bootstrap plug in. CSS code within bootstrap would have to be changed for it to work.

The current folder structure is:
webroot:
css:
bootstrap:
thecssfile.css
js:
bootstrap:
thebootstrap.js
jquery:
jquery.js

A new proposed file structure is:
webroot:
bootstrap:
css:
cssfiles
js:
javascripts
jquery:
jquery
fonts:
fonts
However I realized this problem: people might want to use the bootstrap folder for other things, ex a wordpress blog or something along those lines. If this is an issue then I can see why a file structure like this shouldn't be used/encouraged.

Another possible solution is to just tell them to throw their assets with the others in the webroot folder, IE putting all bootstrap js files in webroot/js rather than throwing files in bootstrap directories, and changing the default template accordingly. I will attach a pull request with the first proposed solution.

Related to issue #67 and Pull Request #88

/cc @jadb @ADmad

I have an Error when i pass to cake 3.1

Error: Unsupported operand types
File /var/www/timesheets/vendor/friendsofcake/bootstrap-ui/src/View/Helper/FlashHelper.php
Line: 55

I use composer update my composer.json for bootstrap-ui. example:

"require": {
        "php": ">=5.4.16",
        "cakephp/cakephp": "~3.0",
        "mobiledetect/mobiledetectlib": "2.*",
        "cakephp/migrations": "~1.0",
        "cakephp/plugin-installer": "*",
        "gregwar/captcha": "1.*",
        "friendsofcake/bootstrap-ui":"~0.3"
    },

My AppView.php

class AppView extends View
{

    /**
     * Initialization hook method.
     *
     * For e.g. use this method to load a helper for all views:
     * `$this->loadHelper('Html');`
     *
     * @return void
     */
    public function initialize()
    {
      $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
  $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
  $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
  $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
    }
}

update success,but in HomeController , write

$this->Flash->success('ok!')

throw a error

BootstrapUI.Element\Flash\default.ctp
Cake\View\Exception\MissingElementException   

is it a bug?

What I'd like to be able to generate

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
    <span id="inputGroupSuccess4Status" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

Use-case
The use-case that I have here is that I would like to create a monetary input field with help text, and prefix the input with the currency to make the user realise that I'm looking for a float.

We should focus on opening a new branch to prepare for the future:

Details can be seen here: http://v4-alpha.getbootstrap.com/migration/#forms

Bootstrap 4 failing with this plug in can be demoed here:
http://sandbox3.dereuromark.de/sandbox/bootstrap

In the Demo none of the bootstrap 4 js is included as of currently. The minified bootstrap css is however included and can be seen to not work with current plug in since bootstrap decided to change some class names.

Form->input('Name', ['type' => 'submit']) outputs a label, probably leaking through after changing the templates behind it.
We can default the label to false here probably.

1. For example if a user logs in with invalid credentials, it should output an alert box stating the error. Or when a client is not authorized in a specific page.
2. Or its client side validation?

I have a test case:

    public function testCustomGridMerge()
    {
        $config = [
            'align' => 'horizontal',
            'grid' => [
                'md' => [
                    'left' => 1,
                    'middle' => 10,
                    'right' => 1
                ],
                'lg' => [
                    'left' => 2,
                    'middle' => 8,
                    'right' => 2
                ],
            ],
        ];
        $this->Form->config($config);
        debug($this->Form->config());

        $this->Form->create($this->article);

        $result = $this->Form->input('title');
        debug($result);
    }

The result is

        'grid' => [
                'left' => (int) 2,
                'middle' => (int) 6,
                'right' => (int) 4,
                'md' => [
                        'left' => (int) 1,
                        'middle' => (int) 10,
                        'right' => (int) 1
                ],
                'lg' => [
                        'left' => (int) 2,
                        'middle' => (int) 8,
                        'right' => (int) 2
                ]
        ],

It always looks first for left/middle/right to be present though...

My idea was to do sth like

    public function config($key = null, $value = null, $merge = true) {
        if ($key === 'grid') {
            $merge = false;
        }
        return parent::config($key, $value, $merge);
    }

but that resulting in larger cakephp internal issues.
So for right now I extend and hack around this issue on project level.

To fix this we should either not allow merging for this key, or change the logic to first look for the specific grid keys, then for the size type (less efficient).

Is there a way to hide the close button in alerts? It would be nice if there was a way to hide this in all alerts.

With 3.1 having been released now and the last official release is 42 commits behind master, it seems logical to push a new release.

Using 0.3.1 with Cake 3.1 causes a Fatal in the FlashHelper.

Using dev-master works, but I'd rather use a release as this repo has no develop branch, so I can't be guarantee that master is stable.

I created a CakePHP 3 project and use this plugin to replace UI with Bootstrap for official Blog tutorial .

https://github.com/hantsy/cakephp3-sample

But the the relations Article->Category does not work as expected.

hi, it would be great if this package used twitter/bootstrap from composer and connected to the styles provided by this package (if possible). thanks. dan

the bootstrap side menu go hidden in small screen sizes.
and we have the header nav bar but empty.
I thought we can grape the side bar items to it.
If you are agree I can make a pull request for this.

we can add them as a sub menu inside a main item in the header nav

I'm just following the instructions in the section 'A quick way of getting the Bootstrap assets installed is using bower.'. I've made a little script from the given code and run it, but quickly noticed that the glyphicons fonts are 404ing. The script makes no note of them (and adding in a line to copy them over is trivial), but I notice that the path given to the fonts in Chrome's Developer Tools is as follows:

Failed to load resource: the server responded with a status of 404 (Not Found)

http://192.168.0.100/cakephp3/css/fonts/glyphicons-halflings-regular.woff

(...and the same for the other two font files.)

It's looking for the fonts in the wrong place, as the path is hard-coded in the bootstrap.css file:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  ...
}

I don't have a solution to this at the moment but thought I had better report it.

I need to inject attributes to the input container, but the template looks like it won't allow me to do that.

'inputContainer' => '<div class="form-group{{required}}">{{content}}{{help}}</div>',

It would be really nice to be able to inject any kind of attributes to any element. Maybe there is a workaround for that? If I could at least do something like in Cake2 'div' => false it would allow me to manually wrap the input.

The background is that I need to modify plenty of the markup to use Angular JS directives.