slywalker / twitterbootstrap Goto Github PK

Hello! All is in the title!
Good job by the way this polugin work like charm!

Hello,
Can you explain this text in installation ?

• Which part will we write? First $helpers array or second $helpers array?
• Where will we write these "public $helpers definition"? To AppController.php or to our derived Controller (example MyController.php) ? If we define them in "AppController.php" is it enough?
• Shouldn't we write this to our controller action?
  CakePlugin::load('TwitterBootstrap')

Thank you

// Usig as plugin's helper
public $helpers = array(
    'Session', 'Html', 'Form',
    'TwitterBootstrap.BootstrapHtml',
    'TwitterBootstrap.BootstrapForm',
    'TwitterBootstrap.BootstrapPaginator',
);

// Using as alias of core helper
public $helpers = array(
    'Session',
    'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'),
    'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'),
    'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'),
);

Query on installation instructions.
When I follow this instruction:
View/Layout/default.ctp
Html->css('bootstrap.min'); ?>
Html->css('bootstrap-responsive.min'); ?>

CakePHP generates this in my HTML

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.min.css" />

but these files don't exist, the instructions told us to put them in app/Plugin/TwitterBootstrap/webroot
Should it look like this?

Same thing for the Html->script('bootstrap.min'); ?>

Hi! Great plugin, but it seems that it is not possible to nest fields inline in a horizontal form.

part of my code:

<?php
    echo $this->Form->create('Event', array('class' => 'form-horizontal'));
    echo $this->Form->input('Event.short_name',array(
        'label' => 'Short name', 
        'type' => 'text', 
        'class' => 'span5'
    ));
?>
<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <?php 
                echo $this->Form->input('Event.start_date', array(
                    'label' => false,
                    'type' => 'text', 
                    'class' => 'span2 start_date', 
                    'after' => '<span class="add-on datetime"><span class="icon-calendar"></span></span>'
                ));

                echo $this->Form->input('Event.end_date', array(
                    'label' => false,
                    'type' => 'text', 
                    'class' => 'span2 end_date', 
                    'after' => '<span class="add-on"><span class="icon-calendar"></span></span>'
                ));
            ?>
        </div>
    </div>
</div>

In the above example this happens:

and the generated html

<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <div class="control-group">
                <div class="controls">
                    <input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

When I add 'div' -> false to the two date form field they move inline but the padding etc is gone.

and the generated html

<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
            <input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
        </div>
    </div>
</div>

I think this is due to the fact that all form fields are placed in controls divs...

Thank you for these project!

Regarding to "This v1.1.10 supports Bootstrap v2.0.2"
Does v1.1.10 includes all bootstrap features or are there any missing ones that are planned to be integrated later?

thanks

If you bake a controller and choose to scaffold it instead of baking the views too, then the pagination will be broken because the the template for scaffolding \lib\Cake\View\Scaffolds\index.ctp generatates the pagination differently than the \app\Plugin\TwitterBootstrap\Console\Templates\bootstrap\views\index.ctp does.

This issue is not really important but it would be may be wise to outline it in the docs to prevent further issue reports about this.
I guess a simple "Don't use scaffolding with this plugin, because of..." or something like this would do.

If I create a form with custom inputDefaults error attributes they do not get imported properly and are overwritten in the _controlGroupStates function.

$this->cForm->create('Client', array('type'=>'post',
            'inputDefaults' => array(
                    'error' => array('attributes' =>
                                array(  'class' => 'help-inline2 error-message2',
                                        'escape'=> false
                                ),
    ))));

The bug is in the array_merge() in _controlGroupStates():

        $options['error'] = array_merge($error, array(
            'attributes' => array(
                'wrap' => 'span',
                'class' => 'help-inline error-message',
            ),
        ));

I fixed it by replacing the above with:

                $options['error'] = $error;
                $defErrAttributes = array(
                        'wrap' => 'span',
                        'class' => 'help-inline error-message',
                        );
                if(empty($options['error']['attributes'])){
                    $options['error']['attributes'] = $defErrAttributes;
                } else {
                    $options['error']['attributes'] = array_merge(
                        $defErrAttributes,
                        $options['error']['attributes']
                    );
                }

I wrote a pretty basic js plugin snippet helper.
https://github.com/dereuromark/tools/blob/2.0/View/Helper/BootstrapHelper.php

in case you plan on including some of it in your rep.
we could probably make it elements, too.
but my idea was that it takes care of including js and other things automatically as well.

Hi,

I've work in add support of grid based forms and the results are here: https://github.com/radig/TwitterBootstrap

Any interest merge it?

For hidden inputs, such as the primary key on an edit action echo $this->Form->input('id'); the plugin currently adds the label as well as control-group and controls divs. Ideally, the plugin should ignore this field and output the default FormHelper HTML, since it is simply a hidden input with no extra div markup.

How to show required marker for input field required, Like :
Name [*] :

How to create ajax pagination?
And how to configure router for better for eye links?

when using $this->BootstrapForm->submit(__('Submit')); the following markup generated:

<div class="form-actions">
   <button type="submit" class="btn" div="form-actions">Submit</button>
</div>

notice the div="form-actions" on the button.

I'm looking to do the inline checkboxes in a .form-vertical box, as illustrated here:

http://cl.ly/1G3a391e2k0C3a150841

Is this currently supported? If not, any chance you'll think about adding this?

Hi,
I'm following the directions but I get stuck at TwitterBootstrap.make. I see that I need to install 'recess' but I'm not sure what that is. Is there a package for it in Ubuntu?

Checkbox for array options.

$sample = array(
  'a' => array(
    '1' => 1,
    '2' => 2,
    '3' => 3,
  ),
  'b' => array(
    '10' => 10,
    '11' => 11,
    '12' => 12,
    '13' => 13,
  ),
);
echo $this->Form->input('sample', array('type'=>'select', 'multiple' => 'checkbox', 'options' => $sample));

This work.

<label class="checkbox">a</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="1" id="ShopSample1">1</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="2" id="ShopSample2">2</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="3" id="ShopSample3">3</label> 
</fieldset> 
<label class="checkbox">b</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="10" id="ShopSample10">10</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="11" id="ShopSample11">11</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="12" id="ShopSample12">12</label> 
<label class="checkbox"><input type="checkbox" name="data[Shop][sample][]" value="13" id="ShopSample13">13</label> 
</fieldset> 

Ideal work.

<fieldset><legend>a</legend> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="1" id="SampleSample1"><label for="SampleSample1">1</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="2" id="SampleSample2"><label for="SampleSample2">2</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="3" id="SampleSample3"><label for="SampleSample3">3</label></div> 
</fieldset> 
<fieldset><legend>b</legend> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="10" id="SampleSample10"><label for="SampleSample10">10</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="11" id="SampleSample11"><label for="SampleSample11">11</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="12" id="SampleSample12"><label for="SampleSample12">12</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Sample][sample][]" value="13" id="SampleSample13"><label for="SampleSample13">13</label></div> 
</fieldset> 

Nothing fieldset start tag.
Please a solution to a problem.

Deleted it as it was completely my fault and stupid mistake, not connected to your plugin.

This:

<?php echo $this->BootstrapForm->input('sample4_0', array(
    'label' => 'Checkboxes',
    'multiple' => 'checkbox',
    'after' => 'Note:  This is positioned incorrectly',
    'options' => array(
        1 => '1',
        2 => '2',
        3 => '3',
        4 => '4',
        5 => '5',
    ),
)); ?>

Generates this:
http://cl.ly/0N2w201x421H1G1H3c1r

But it should look more like:
http://cl.ly/3p020L3J3G300u1v1a1F

After going through the listed installation method. I have copied Plugins/TwitterBootstrap/Views/Layouts/bootstrap.ctp to my Views/Layouts/

in my AppController.php i have add public $layout = 'bootstrap';

I'm getting these errors in the view when trying to load any of my pages controller actions

Warning (2): Missing argument 1 for HtmlHelper::css(), called in /Users/tcresine/dev/gi/projects/apps-gi/care/trunk/View/Layouts/bootstrap.ctp on line 17 and defined [APP/Cake/View/Helper/HtmlHelper.php, line 422]
Notice (8): Undefined variable: path [APP/Cake/View/Helper/HtmlHelper.php, line 429]
Notice (8): Undefined variable: path [APP/Cake/View/Helper/HtmlHelper.php, line 440]
Notice (8): Undefined variable: path [APP/Cake/View/Helper/HtmlHelper.php, line 443]

When loading the controller twitter_bootstrap, everything loads fine

Any idea as how to fix this? I'm pretty sure i followed every step.

When creating a hidden input field like this:

The input field itsself is hidden, but the label is still visible.
Also, when the form is displayed inline, there is still a lot of unwanted html inserted:

I dont have time to fix this right now, but mayb somebody else can.

Hi,

I got this notice on a wrap submit button included in a element (in header layout).
This notice prompts only when a plugin route is active

(Cake 2.3.2)

Notice (8): Array to string conversion [CORE/Cake/View/Helper.php, line 483]

Context:

$key = 'append'
$value = array(
(int) 0 => 'OK',
(int) 1 => array(
'wrap' => 'button',
'class' => 'btn'
)
)

$escape = true

source:

<?php 
echo $this->Form->input('q', array(
'label' => false,
'placeholder' => __d('layout', 'Search'),
'type' => 'text',
'class' => 'span12',
'append' => array('OK', array('wrap' => 'button', 'class' => 'btn')),
 ));
?>

HTML render :

non-plugin :

<div class="input-append">
<input id="SearchableQ" class="span12" type="text" placeholder="Search" name="data[Searchable][q]">
<button class="btn">OK</button>
</div>

plugin :

<div class="input text">
<input id="SearchableQ" class="span12" type="text" append="OK Array" placeholder="Search" name="data[Searchable][q]">
</div>

I created a form using the helper to create prepend/append text fields. I didn't specify either the id or name of the element, and the name was coming back as the 'price' as opposed to 'data[$Model][price]'.

The current code only supports 'div' => "classname", not 'div' => array().

Here are the changes for array support:

BootstrapFormHelper.php > function input():

ORIGINAL CODE:

    $div = $this->_extractOption('div', $options);
    $options['div'] = false;

REPLACEMENT CODE:

        $div = $this->_extractOption('div', $options);
        if (is_string($div)) {
             $divOptions['class'] = $div;
             $divOptions['options'] = array();
        } elseif (is_array($div)) {
            $divOptions['class'] = null;
            $divOptions['options'] = $div;
        }
        $options['div'] = false;

ORIGINAL CODE:

return (false === $div) ? $out : $this->Html->div($div, $out);

REPLACEMENT CODE:

return (false === $div) ? $out : $this->Html->div($divOptions['class'], $out, $divOptions['options']);

1. Control -Label class should be applied to label
   https://github.com/slywalker/TwitterBootstrap/blob/master/View/Helper/BootstrapFormHelper.php#L20

`
'label' => array('class' => 'control-label'),

`

2. $text may not be set
   https://github.com/slywalker/TwitterBootstrap/blob/master/View/Helper/BootstrapFormHelper.php#L160

`
$text = null;
if(!empty($options['label']['text']))$text = $options['label']['text'];

`

all is is well afterwards

What about this.
Should we write this to "Config/bootstrap.php" ? If yes can you add this to installation instructions?
CakePlugin::load('TwitterBootstrap')

With the development of Bootstrap 3, Twitter has deleted the Bootstrap 2 repo and thus doing
git submodule update --init
after the main repo clone fails. All that really needs to be done is to change the installation instructions to manually include the upload, or include the files in the repo. I just wanted to bring it to your attention and you can address it how you see best fit.

Hi Slywalker,

Are you by any chance planning on updating your CakePHP Plugin to function with Twitter Bootstrap V3.0, the latest iteration by @mdo and @fat?

If not, I will try to update/convert your code myself so it will function properly, but with you being the author I just wanted to ask if you weren't working on such a thing already.

Regards,
Thomas

In file "Config/html5_tags.php", the redefined <img> tag generates invalid HTML:

'image' => '<img src="%s"%s>',

... renders as:

<img src="/debug_kit/img/cake.icon.png"alt="CakePHP">

It should be:

'image' => '<img src="%s" %s>',

Default CakePHP tag is:

'image' => '<img src="%s" %s/>',