emagister / zend-form-decorators-bootstrap Goto Github PK

Hello,

I've added this element in a Twitter_Bootstrap_Form_Horizontal:

$this->addElement('checkbox', 'mycheckbox', array(
  'label'      => 'A label',
));

Result is:

<div class="control-group">
  <label for="mycheckbox" class="control-label">A label</label>
  <div class="controls">
    <input type="hidden" name="mycheckbox" value="0">
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="1">
  </div>
</div>

But I want to produce this:

<label class="checkbox">
  <input type="mycheckbox"> A label
</label>

Is there a way to do this?

Twitter_Bootstrap_Form_Element_Submit didn't support icons but Twitter_Bootstrap_Form_Element_Button did. Also we can't make a Button type submitwithout getting the icon as a valuein the generated code , resulting it passed as an element in the post / get call .

Hai,

i want to add a date picker with an image in the right end of textbox please help me..

I build a form without labels because i used placeholder, so now the inputs have a margin of 180px on the left.
I think it make sense to automatically remove the HtmlTag Decorator if no label is set?

Temporary i solved this by add removeDecorator('HtmlTag') to every element form element

Hi,

when generating a form via extending Twitter_Bootstrap_Form, invalid HTML gets generated.
Within the FORM tag are DD tags and DT tags, but the surrounding DL tag is missing:

form
dt
dd
dt
dd
form

With a prepended text input, there's a few pixel gap between the prefixed value and the text input itself.

I've diagnosed this as a markup issue, as there is a space/line break between those. Removing this fixes the gap.

Looks like the addon decorator needs tweaking to resolve this?

This only occurs with prepend, append is fine.

Am using bootstrap 2.0.4

Hi there!

is there a specific reason for not adding the Label Decorator to the Vertical Form?

thx

Hi,

the 'size' attribute is captured by the FieldSize decorator and "converted" to class="span<size>". Because size is a valid attribute for <select> this clashes with use cases where a Zend_Form_Element_Select or Zend_Form_Element_MultiSelect should actually render as <select size="5">.

This is especially true for non-multiselect selects that should get a size (height) because it can't be set using CSS. For multiselects it's possible to use a CSS workaround like e.g. height: 200px - doesn't work for non-multiselect selects.

What would be the solution for this? - excluding $element->getType() !== "Zend_Form_Element_Select" in the FieldSize decorator? Adding another option like "height" for it (translating to size)? Or is this once again a case like issue #2 and the possibility to remove element decorators by moving parent::__construct()?

In that case I think I'd prefer the "height" option, because it saves some work when adding Zend_Form_Element_Select elements.

What's your opinion?

How can a "controls-row" be implemented?

Take the following example:

<?php
// Radio Buttons
$this->addElement('radio', 'myRadio', array (
        'label' => 'Radio Buttons', 
        'multiOptions' => array (
                1 => 'One Fish', 
                2 => 'Two Fish', 
                3 => 'Red Fish', 
                4 => 'Blue Fish' 
        ) 
));

// Radio Buttons
$this->addElement('multiCheckbox', 'myCheckboxes', array (
        'label' => 'Checkboxes',
        'multiOptions' => array (
                1 => 'One Fish',
                2 => 'Two Fish',
                3 => 'Red Fish',
                4 => 'Blue Fish'
        )
));

It produces the following result

<label class=" radio" for="myRadio-1"><input type="radio" name="myRadio" id="myRadio-1" value="1" class="">One Fish</label>
<br />

It seems the view helper is getting the separator '
' when it should be getting '' by default.

It seems that these decorators are intended for use in other people's ZF projects, but I can't seem to find an explicit declaration of license terms. Is commercial use permitted, for example?

First of all thanks for the great work.
Warning: Exception caught by form: No file decorator found... unable to render file element
Stack Trace:
#0 C:\Program Files (x86)\Zend\www\imob3\www\library\Twitter\Bootstrap\Form\Decorator\FormElements.php(79): Zend_Form_Element_File->render()
#1 C:\Program Files (x86)\Zend\ZendServer\share\ZendFramework\library\Zend\Form\DisplayGroup.php(920): Twitter_Bootstrap_Form_Decorator_FormElements->render('')
#2 C:\Program Files (x86)\Zend\www\imob3\www\library\Twitter\Bootstrap\Form\Decorator\FormElements.php(79): Zend_Form_DisplayGroup->render()
#3 C:\Program Files (x86)\Zend\ZendServer\share\ZendFramework\library\Zend\Form.php(2904): Twitter_Bootstrap_Form_Decorator_FormElements->render('')
#4 C:\Program Files (x86)\Zend\ZendServer\share\ZendFramework\library\Zend\Form.php(2920): Zend_Form->render()
#5 C:\Program Files (x86)\Zend\www\imob3\www\application\modules\admin\views\scripts\agenti\add.phtml(1): Zend_Form->__toString()
#6 C:\Program Files (x86)\Zend\ZendServer\share\ZendFramework\library\Zend\View.php(108): inclu in C:\Program Files (x86)\Zend\ZendServer\share\ZendFramework\library\Zend\Form.php on line 2925

config.ini

autoloaderNamespaces[] = "Twitter"

Everything else works.

Seems that I cannot use this with ZEND 1.x . Is this supposed to work also with ZEND 1.x ?

I tried to put in the application.ini:

autoloaderNamespaces.Twitter = "Twitter_"

And then when I try to use the form I get the message:

Warning: include_once(Twitter/Bootstrap/Form/Vertical.php): failed to open stream: No such file or directory in /home/user/work/zend_projectdir/library/Zend/Loader.php on line 146

Did I miss anything ?

I am unable set checkboxes on form redisplay

->setValue(array)

is not working, no checkboxes are checked. I have debugged and found $value in Twitter_Bootstrap_View_Helper_FormMultiCheckbox has got strange values.

but if I pass just one value instead of array it is working fine, one checkbox selected.

any ideas. please help

Thanks,

In a Twitter_Bootstrap_Form_Horizontal if you add an element using the following code, the element will use zend decorators such as the DtDd tags.

$textElement = $this->createElement('text', 'myText', array(
    'label' => 'This is a label'
));

$this->addElement($textElement);

Hi,

I'm using Timepicker for Twitter Bootstrap and I need to add a class to input div. Example:

Becouse of class inheritance (Horizontal extends Vertical) it's not possible to use horizontal element decorators. They are overwriten in construct via $this->setElementDecorators(). I think that Twitter_Bootstrap_Form_Horizontal should extend Twitter_Bootstrap_Form.

Hi, I installed this with composer and after trying to use it, I get the following error:
Fatal error: Class 'Zend_Form' not found in /srv/http/ed/vendor/emagister/zend-form-decorators-bootstrap/Twitter/Bootstrap/Form.php on line 20

The path to the Zend_Form is:
/srv/http/ed/vendor/zendframework/zendframework/library/Zend/Form/

When creating a button the value of the button is overridden by whatever the label is set to.

Code to reproduce

<?php
// This will create an element, but the value 
// will be "<i class="icon-trash"></i> Label" instead of "1"
$this->addElement('button', 'deleteRow', array (
    'buttonType' => Twitter_Bootstrap_Form_Element_Button::BUTTON_DANGER,
    'label' => 'Label', 
    'icon' => 'trash', 
    'validators' => array (
        array (
            'validator' => 'InArray', 
            'options' => array (
                'haystack' => $validQuoteGroupId_DeviceId_Combinations 
            ) 
        ) 
    ),
    'value' => '1'
));

Is it possible to create tags for each new version you make? That makes it easier to use the library for packaging! We are using Composer to include your library into our project.

I don't know if it is beyond the scope of this implementation or if this is the right place to point this out, but I think would be nice if placeholders could be translated.

As they're nothing more than an attribute perhaps and if statement would do the job (I don't know where to apply it) but seems like a messy solution.

To workaround this I just called the getView() method and use translator helper from the view.

I'm pretty new to Zend Framework, but wanting to use Twitter Bootstrap with it.

I've cloned this repository into my library directory, so my folder structure now looks like:

application
library
    Twitter
        Bootstrap
public
tests

I've then created a form in application/forms/:

<?php
class Application_Form_PropertySearch extends Twitter_Bootstrap_Form_Inline
{
    public function init()
    {
        $this->setName('property_search')
             ->setMethod('get');

        $location = new Zend_Form_Element_Text('location');
        $location->setLabel('Search for a Property in:');

        $submit = new Zend_Form_Element_Submit('search');
        $submit->setLabel('Search')
               ->setAttrib('class', 'btn btn-primary');

        $this->addElements(array(
            $location,
            $submit
        ));
    }
}

But I'm getting the following error:

Fatal error: Class 'Twitter_Bootstrap_Form_Inline' not found in /Users/Martin/Dropbox/Repositories/sarahmains.com/application/forms/PropertySearch.php on line 4

Do I need to do anything extra in Zend Framework for it to discover the new Twitter library? Or have I done something wrong?

When adding a button element and setting the label property, not only the button is rendered in a Horizontal form but also the field label.

Example output: https://img.skitch.com/20120904-x11uddf5q93shyu3mjair1aqy4.jpg

Below is the init code of the Horizontal form

public function init()
{
    parent::init();

    $this->setMethod(Zend_Form::METHOD_POST);

    $this->addElement('text', 'username', array(
        'label' => 'Username',
        'filters' => array(
            new Zend_Filter_StringTrim(),
            new Zend_Filter_StringToLower(),
            new Zend_Filter_StripTags()
        ),
        'required' => true
    ));

    $urlHelper = Zend_Controller_Action_HelperBroker::getStaticHelper('url');
    $retrievePasswordUrl = $urlHelper->simple('retrievepassword', 'auth', 'default');
    $this->addElement('password', 'password', array(
        'label' => 'Password',
        'description' => sprintf('<a href="%s">forgot password?</a>', $retrievePasswordUrl),
        'required' => true
    ));

    $this->addElement('button', 'submit', array(
        'label'      => 'Send e-mail!',
        'buttonType' => Twitter_Bootstrap_Form_Element_Submit::BUTTON_SUCCESS,
        'icon'       => 'ok',
        'whiteIcon'  => true,
        'iconPosition' => Twitter_Bootstrap_Form_Element_Button::ICON_POSITION_RIGHT
    ));

}

There's a slight problem with decorators for hidden elements: because Zend_Form::__construct() calls $this->init() and Twitter_Bootstrap_Form_* calls $this->setElementDecorators(...) after parent::__construct() it is not possible to remove bootstrap decorators from hidden elements.

Unless of course by overloading Zend_Form::render() ... but maybe this can be avoided

Hidden Fields get the same default decorators as every other element including the control-group which is displayed as table and moves the content down. (at least in the Horizontal Form implementation it does)

Hidden Fields are also borked in Zend_Form as they add the dd,dt markup as described here:
http://stackoverflow.com/questions/481871/zend-framework-how-do-i-remove-the-decorators-on-a-zend-form-hidden-element

i would suggest to remove all Decorators and just add the ViewHelper as described above, therefore i will create a pull request

As the title say. This may be specific to my setup but I have Zend framework loaded in via Composer and Zend Form Decorators Bootstrap also loaded in via composer.

It fails though with:

Zend_Loader_PluginLoader_Exception

Plugin by name 'FieldSize' was not found in the registry; used paths: Twitter_Bootstrap_Form_Decorator_: Twitter/Bootstrap/Form/Decorator/ Zend_Form_Decorator_: Zend/Form/Decorator/

I couldn't find this in the documentation any where, but how do I add two controls to an element? Think a property search form, where you have select options for price. My mark-up would be like:

<div class="control-group">
  <div class="control-label">Price</div>
  <div class="controls">
    <select name="min_price" id="min_price">
      <option value="0">Select:</option>
      <!-- rest of price options -->
    </select>
    <select name="max_price" id="max_price">
      <option value="0">Select:</option>
      <!-- rest of price options -->
    </select>
  </div>
</div>

How would I replicate this using this library in Zend Framework?

How can we handle errors on an inline form?

I'm currently creating a decorator to show the errors on hover. These will have to be manually added to the decorator stack.

If we decide to add these manually, should we develop a few different ways of showing them and then pass an option in the constructor of the inline form to choose which one to implement?

Because radio class interferes with radio-inline I suggest to modify FormRadio view helper to something like this:

const RADIO_INLINE = 'radio-inline';
if (substr_count($label_attribs['class'], self::RADIO_INLINE) < 1) {
        $label_attribs['class'] .= ' radio';
}
$label_attribs['class'] = trim($label_attribs['class']);

Hello i'm trying to install the library Zend 2 frameworks but i don't know how to install it.

Where i have to put this library in my Frameworks ? i have to using command php composer.phar ?

Can you help me ?

Regards

Ridertahiti

Something I do in smaller inline forms is prepend/append a submit button. Example:

<form class="form-inline">
    <div class="control-group">
        <div class="controls">
            <div class="input-prepend">
                <button type="button" class="btn btn-success"><i class="icon-plus-sign icon-white"></i> Add</button><select><option>Test</option></select>
            </div>

        </div>
    </div>
</form>

Would it be acceptable to update the syntax for prepend/append to accept things like this? We could pass an element directly into the prepend field and detect it in the decorator and apply it accordingly.

Hi, I've noticed that form elements when generatedaren't enclosed by the control-group div. I found the decorater wrapper but when I tried to assign it to an element it renders only the control group div but the element is not rendered at all.

The sample contains:

        $this->setElementsBelongsTo('bootstrap');

but this does not work and raises an exception when called:

Method setElementsBelongsTo does not exist

Regarding issue #6 this bug is back again with v3 of the bootstrap.
We were using v2 so far and recently we upgraded to v3 of the library. This broke the file element, and the issue we are having is exactly the one described in issue #6

When using the form class like below, the input field is added twice. I ensured the Twitter Bootstrap decorator was used. Any clue why this might be happening?

<?php
class MyApp_Form_EditProfileImage extends Twitter_Bootstrap_Form_Horizontal
{
    public function __construct($file_path, $options = null)
    {
        parent::__construct($options);

        /**
         * Set the basic settings for this form.
         */
        $this->setName('editprofile');

        /**
         * Element: profile_image
         */
        $this->addElement('file', 'profile_image', array(
            'label' => 'Profile Image',
            'required' => true,
            'maxfilesize' => 2097152,
            'filters' => array(
                array('Chmod', false, CHMOD_FILE),
                array('Rename', false, array(
                    'target' => $file_path,
                    'overwrite' => true,
                    'keep_file_extension' => false
                )),
            ),
            'validators' => array(
                array('Count', false, 1),
                array('IsImage', true, array('image/jpeg', 'image/gif', 'image/png')),
                array('ImageSize', true, array(
                    'minwidth' => 50,
                    'maxwidth' => 3000,
                    'minheight' => 50,
                    'maxheight' => 3000
                ))
            )
        ));

        $this->addElement('submit', 'submit_profile', array(
            'ignore' => true,
            'label'  => 'Save',
            'class'  => 'btn btn-primary',
        ));
    }
}

<form method="post" action="" class=" form-horizontal" enctype="multipart/form-data" name="editprofile" id="editprofile">
    <div class="control-group">
        <label class="control-label required" for="profile_image">Profile Image</label>
        <div class="controls">
            <input type="file" class="input-file" id="profile_image" name="profile_image">
        </div>
    </div>
    <input type="hidden" id="MAX_FILE_SIZE" value="2097152" name="MAX_FILE_SIZE">
    <input type="file" class=" input-file" id="profile_image" name="profile_image">
    <div class="control-group">
        <label class="control-label optional" for="submit_profile">Save</label>
        <div class="controls">
            <input type="submit" class="btn btn-primary" value="Save" id="submit_profile" name="submit_profile">
        </div>
    </div>
</form>

Hi,

problem : http://i.imgur.com/97hJKVG.png

Description and same class name is used for error messages, I need a separate class name of error messages. Can you give a separate class name for the error decorator?

like this : Twitter_Bootstrap_Form_Decorator_ElementErrors class

I can't edit because i use composer.

The normal Bootstrap classes contain labels above or next to the input fields.
This script appears to be ignoring the label setting, and refuses to show them.

commit 934c6d4 raises a new Issue.

Moving calling the parent::__construct down makes setElementDecorators useless as the element array ist empty.

It's initialized through the init method which will be called eventually in the Zend_Form constructor, but that is called afterwards due to the change.

Therefore Elements get the Zend_Form default decorators which then breaks the Forms.

Since the FileDecorators are broken if the change is reversed i open an issue and search for a better solution.

As you can see on the screen there is a problem with button label when not using dedicated DisplayGroup.

Can we make an input field required ? the input is red instead of the default blue color
If yes how, didn't find an example in the documentation, and I'm sorry if this isn't the right place to ask this question ? I'm new here :/

Title says it all, for all required elements, give it the required attribute

I'm not sure how many other people use both a prepend and append on their inputs. However it is something that is supported by bootstrap.

I'm working on writing a fix for this.

Hello,

I was upgrade to version 0.1.7. before I have 0.1.6.

And now when I declare the element hidden the label is appear...

Why ?

thanks

After installation via composer I get
Fatal error: Class 'Calendar\Form\Twitter_Bootstrap_Form_Vertical' not found in ...

In compose/autoload_namespaces.php there is a line
'Twitter_' => array($vendorDir . '/emagister/zend-form-decorators-bootstrap'),

But that doesn't help. Any ides?

PS. Zend Framework 2.2

There doesnt appear to be a way of setting within a form

$element->getDecorator('Description')->setEscape(false);

below is the example of my "password" field

$this->addElement('password', 'password', array(
    'label' => 'Password',
    'prepend' => '<i class="icon-lock"></i>',
    'filter' => 'StringTrim',
    'description' => array(
        array(
            'description' => '&lt;a href="forgotpassword"&gt;Forgot password?&lt;/a&gt;',
            'options' => array('escape' => false)
         )
    ),
    'AllowEmpty' => false,
    'validators'  => array(
        array(
            'validator' => 'StringLength',
            'options' => array(
                'min' => 8,
                'max' => 50,
                'messages' => array(
                     Zend_Validate_StringLength::INVALID => Zend_Registry::get('LOGIN_ERROR'),
                     Zend_Validate_StringLength::TOO_SHORT => 'Password ' . Zend_Registry::get('ERROR_LENGTH'),
                     Zend_Validate_StringLength::TOO_LONG => 'Password ' . Zend_Registry::get('ERROR_LENGTH')
                )
            )
        )
     )
));

the resulting output is simply "Array" rather than the options being set.

Does this extension work with Zend_SubForm. I can't see any mention of it in the code?

Hi there,

Great job with this library it is really helpful and zf's is so bad. I am having trouble with this bug, and I wonder if anyone can fix this it.

Consider this code taken as is from your readme:

$this->addElement('button', 'submit', array(
'label' => 'Send e-mail!',
'buttonType' => Twitter_Bootstrap_Form_Element_Submit::BUTTON_SUCCESS,
'icon' => 'ok',
'whiteIcon' => true,
'iconPosition' => Twitter_Bootstrap_Form_Element_Button::ICON_POSITION_RIGHT
));

It displays the button with the ok tick, but on the label side it displays the html for the tick. (Send e-mail! )

Cheers,
Xavier

like this one , is it possible to add the helper line on some form elements ?

Hi,

I am having problem when I create a new TEXTAREA, that the LABEL and PLACEHOLDER contaim one special caracter, and Legend of groud

Please try reproduce the error:
In Twitter_Bootstrap_Form_Horizontal

    // DESCRICAO -------- [ok]
    $this->addElement (
            'text',
            'descricao',
            array ('label' =>  'Descricao:'  ,//--- [ SHOW]
                    'validators'=>array (
                            new Zend_Validate_NotEmpty(),
                            new Zend_Validate_StringLength( 0 , 100)
                    ),
                    'filters' => array (
                            new Zend_Filter_StringTrim (),
                            new Zend_Filter_StringToLower (),
                            new Zend_Filter_StripTags () ),
                    'required' => true ,
                    'attribs' => array( 'COLS' => '40' , 'ROWS' =>'4' ),
                    'placeholder' => 'Descricao do Produto'  //--- [ SHOW]
            )
    );

// DESCRICAO -------- [problem]
$this->addElement (
'text',
'descricao2',
array ('label' => 'Descrição:' , //--- [ NOT SHOW]
'validators'=>array (
new Zend_Validate_NotEmpty(),
new Zend_Validate_StringLength( 0 , 100)
),
'filters' => array (
new Zend_Filter_StringTrim (),
new Zend_Filter_StringToLower (),
new Zend_Filter_StripTags () ),
'required' => true ,
'attribs' => array( 'COLS' => '40' , 'ROWS' =>'4' ),
'placeholder' => 'Descricão do Produto' //--- [ NOT SHOW]
)
);

    $this->addDisplayGroup (
            array ('nome','descricao' ),
            'g1',
            array ('legend' => "Informações sobre o Produto"  ) //-- [PROBLEM NOT SHOW]
    );

I would like to know if is possible to add new attirbues to configure escapes:

Exemples:
escapeLabel [ true / false ]
escapePlaceholder[ true / false ]
escapeLegend [ true / false ]

Please help with this issue, what is workaround to fix it before correction?

elements are wrapped in the default dt dd tags when doing the following:

$text1= new Zend_Form_Element_Text('text1');
$text1->setLabel('Text1');

$text2= new Zend_Form_Element_Text('text2');
$text2->setLabel('Text2');

$this->addElements(array($text1, $text2));