Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Add option for different label rendering for radio buttons #102

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

BreyndotEchse
Copy link

Adds an option to allow different rendering of label attributes for radio labels.

Examples:

Config:

'options' => array(
    'label' => 'Global Label',
    'value_options' => array(
        'first' => 'First',
        'second' => 'Second',
    ),
    'column-size' => 'sm-9',
    'label_attributes' => array(
        'class' => 'col-sm-3',
    ),
    'global-label-attributes' => null / true / false,
),

null (default/current behavior)

<div class="form-group ">
    <label class="col-sm-3 control-label">Global Label</label>
    <div class=" col-sm-9">
        <div class="radio"><label class="col-sm-3 control-label"><input name="quantity" value="first" type="radio">First</label></div>
        <div class="radio"><label class="col-sm-3 control-label"><input name="quantity" value="second" type="radio">Second</label></div>
    </div>
</div>

true

<div class="form-group ">
    <label class="col-sm-3 control-label">Global Label</label>
    <div class=" col-sm-9">
        <div class="radio"><label><input name="quantity" value="first" type="radio">First</label></div>
        <div class="radio"><label><input name="quantity" value="second" type="radio">Second</label></div>
    </div>
</div>

false

<div class="form-group ">
    <label class="control-label">Global Label</label>
    <div class=" col-sm-9">
        <div class="radio"><label class="col-sm-3 control-label"><input name="quantity" value="first" type="radio">First</label></div>
        <div class="radio"><label class="col-sm-3 control-label"><input name="quantity" value="second" type="radio">Second</label></div>
    </div>
</div>

Fix

Fixes #97

Don't use element label options if `global-label-attributes` option is FALSE
Don't use element label options if `global-label-attributes` option is not FALSE
Revert changes and change attribute parsing for proper rendering
Don't call \Zend\Form\LabelAwareInterface::setLabelAttributes, if attributes are empty
@neilime
Copy link
Owner

neilime commented Sep 8, 2014

I'm not sure that I understand the goal of this pull request. Here is the rendering with the option set to false : http://jsfiddle.net/neilime/u33tkt85/. Is it right that the label is on that position ?

@BreyndotEchse
Copy link
Author

You are right that setting this option to false doesn't make much sense in a horizontal form. But I thought I should allow to set classes for radio-labels only, if i allow custom classes for the global label. In a "normal" bootstrap form, this feature could be quite useful. See the second example here http://fiddle.jshell.net/tyhbnb0y/show/ (Fiddle: http://jsfiddle.net/tyhbnb0y/).

The purpose of this PR is to allow proper rendering of a global label in horizontal forms for radio buttons (See example "Global Label (true)" in "Testform"). The other way around is just nice to have.

Configs used for examples:

<?php
return array(
    'forms' => array(
        'testform' => array(
            'elements' => array(
                array(
                    'spec' => array(
                        'name' => 'text',
                        'type' => 'Text',
                        'options' => array(
                            'label' => 'Text',
                            'column-size' => 'sm-9',
                            'label_attributes' => array(
                                'class' => 'col-sm-3',
                            ),
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (null)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'column-size' => 'sm-9',
                            'label_attributes' => array(
                                'class' => 'col-sm-3',
                            ),
                            'global-label-attributes' => null,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (true)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'column-size' => 'sm-9',
                            'label_attributes' => array(
                                'class' => 'col-sm-3',
                            ),
                            'global-label-attributes' => true,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (false)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'column-size' => 'sm-9',
                            'label_attributes' => array(
                                'class' => 'col-sm-3',
                            ),
                            'global-label-attributes' => false,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'textarea',
                        'type' => 'Textarea',
                        'options' => array(
                            'label' => 'Textarea',
                            'column-size' => 'sm-9',
                            'label_attributes' => array(
                                'class' => 'col-sm-3',
                            ),
                        ),
                    ),
                ),
            ),
        ),
    ),
);
<?php
return array(
    'forms' => array(
        'labelform' => array(
            'elements' => array(
                array(
                    'spec' => array(
                        'name' => 'text',
                        'type' => 'Text',
                        'options' => array(
                            'label' => 'Text',
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (null)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'label_attributes' => array(
                                'class' => 'label label-info',
                            ),
                            'global-label-attributes' => null,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (true)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'label_attributes' => array(
                                'class' => 'label label-info',
                            ),
                            'global-label-attributes' => true,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'radio',
                        'type' => 'Radio',
                        'options' => array(
                            'label' => 'Global Label (false)',
                            'value_options' => array(
                                'single' => 'First',
                                'pair' => 'Second',
                                'third' => 'Third',
                            ),
                            'label_attributes' => array(
                                'class' => 'label label-info',
                            ),
                            'global-label-attributes' => false,
                        ),
                    ),
                ),
                array(
                    'spec' => array(
                        'name' => 'textarea',
                        'type' => 'Textarea',
                        'options' => array(
                            'label' => 'Textarea',
                        ),
                    ),
                ),
            ),
        ),
    ),
);

@neilime
Copy link
Owner

neilime commented Sep 21, 2014

OK, I got it. Please, can you update the readme file to explain the behavior of your improvment

@neilime
Copy link
Owner

neilime commented Nov 3, 2014

I'm waiting for your update of the readme file to merge your pull request

@samuel02
Copy link

@BreyndotEchse Are you planning on fixing the last things on this? Otherwise I might take over it since I'm in need of the same feature.

@BreyndotEchse
Copy link
Author

Sorry. Don't have the time at the moment.

@neilime neilime self-assigned this Sep 19, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Horizontal form and radio
3 participants