MopaBootstrapBundle
MopaBootstrapBundle copied to clipboard
choice_widget_expanded incorrectly applies `label_attr` to children and row
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>
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,
])
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.