MopaBootstrapBundle icon indicating copy to clipboard operation
MopaBootstrapBundle copied to clipboard

choice_widget_expanded incorrectly applies `label_attr` to children and row

Open lifo101 opened this issue 9 years ago • 1 comments

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 avatar Sep 29 '15 11:09 lifo101

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.

lifo101 avatar Oct 01 '15 16:10 lifo101