Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

choice_widget_expanded incorrectly applies label_attr to children and row #1113

Open
lifo101 opened this issue Sep 29, 2015 · 1 comment
Open

Comments

@lifo101
Copy link

lifo101 commented Sep 29, 2015

The twig block choice_widget_expanded is applying the label_attr to its primary label and to each of the children, which produces wierd results, especially when you're using inline-btn as the widget_type. Basically, I want to apply btn-default to the children of the form row but not have it apply to the main label of the row (this causes the label of the row to have a btn 'hover' effect, which is annoying). The HTML output below shows that it's doing it incorrectly.

I'm trying to figure out a way to fix this in the choice_widget_expanded block but I'm having trouble with the way the logic flows. If I figure it out I'll send a PR.

Actual rendered HTML (flawed):
Notice how btn btn-default is duplicated on each iteration and how btn-default is applied to the main label of the row?

<div class="form-group">
    <label class="btn-default control-label col-sm-3 required">Choices</label>
    <div class="col-sm-9">
        <div data-toggle="buttons" class="btn-group">
            <label class="btn btn-default checkbox-inline-btn"><input type="checkbox" value="0" class="" name="test[choices][]" id="test_choices_0">One</label>
            <label class="btn btn btn-default checkbox-inline-btn"><input type="checkbox" value="1" class="" name="test[choices][]" id="test_choices_1">Two</label>
            <label class="btn btn btn btn-default checkbox-inline-btn"><input type="checkbox" value="2" class="" name="test[choices][]" id="test_choices_2">Three</label>
            <label class="btn btn btn btn btn-default checkbox-inline-btn"><input type="checkbox" value="3" class="" name="test[choices][]" id="test_choices_3">Four</label>
        </div>
    </div>
</div>

example

Due to how the label_attr is used in the child loop of the choice_widget_expanded block it adds the attributes over and over. This is not a huge deal, The main problem is that the primary label of the form row uses the same label attr's of the children.

Code used to render the above snippet:

->add('choices', 'choice', [
    'widget_type' => 'inline-btn',
    'label_attr' => [ 'class' => 'btn-default' ],
    'choices' => ['One', 'Two', 'Three', 'Four'],
    'expanded' => true,
    'multiple' => true,
    'mapped' => false,
])
@lifo101
Copy link
Author

lifo101 commented Oct 1, 2015

An CSS work-around to get rid of the label hover can be done with the following:

label.btn-default.control-label:hover {
  background-color: inherit;
}

This doesn't fix the underlying issue of how the form control is rendered, but at least it gets rid of the visual annoyance for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant