jmclean
commented
8 years ago A. To put a class on the form element use {{ form_row(form.numero, {label: 'Numéro', 'attr': { 'class': 'col-sm-8' }}) }} (there is no third argument). In your case you might need it on the wrapping div instead, in which case you'll need to override one small block in bootstrap_3_horizontal_layout:
{{ form_row(form.numero, {label: 'Numéro', 'group_class': 'col-sm-8' }) }}
...
{% block form_group_class group_class | default(parent()) %}B. This one is a bit trickier since our collection JS expects all the items to be children of <div class="items">, and for there to be no other divs there. It's not compatible with Bootstrap tabs but you could try something like this:
<div class="collection">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="items" data-item-type="brunobundle_telephone" href="#">Telephone</a></li>
<li><a data-toggle="items" data-item-type="brunobundle_email" href="#">Email</a></li>
<li><a data-toggle="items" data-item-type="brunobundle_adresse" href="#">Adresse</a></li>
</ul>
<div class="items">
{% for subForm in form %}
{{ form_row(subForm) }}
{% endfor %}
</div>
...
{% block _brunobundle_bruno_moyensComm_entry_row %}
<div class="item" data-item-type="{{ form._type.vars.value }}"{% if form._type.vars.value != 'brunobundle_telephone' %} style="display: none"{% endif %}>
...And some extra JS:
$(function () {
$('a[data-toggle="items"]').on('click', function (e) {
e.preventDefault();
var itemType = $(this).attr('data-item-type');
$(this).parent().addClass('active').siblings().removeClass('active');
$(this).closest('.collection').find('.item').css({
display: function () { return $(this).attr('data-item-type') == itemType ? '' : 'none' }
});
});
$('.items').on('infinite_collection_add', function (e) {
// Switch to correct tab and adjust display state of newly added row
var coll = $(this).closest('.collection');
setTimeout(function () {
coll.find('a[data-item-type="' + e.$row.filter('.item').attr('data-item-type') + '"]').click();
}, 0);
});
});Even this isn't perfect since if there's a validation error in the third tab then the user won't see it until they click through the tabs. Personally I'd be tempted to just keep all three types visible at once. :)
3kynox
Hello again,
sorry about asking a lot of things, but since my work require that PolyCollection type, it's possible I got some more answers after these ones.
Anyway, 2 things needed here.
A. I can't get out why inside my TWIG template I can't set a class attribute for an individual field.
Provides nothing with that class in source code. Same result on a 'form_widget'.
Any reason for that ? (the only one I see is my twig theme extends bootstrap_3_horizontal_layout.html.twig, but I would like to be able to act directly inside a label, row or widget without override bootstrap 3 blocks).
B. According to my previous issue (nb https://github.com/infinite-networks/InfiniteFormBundle/issues/48), I need to display my telephones, emails & adresses inside bootstrap tabs.
I first simply tried to include the code :
... inside simple divs.
Now, when I click on 'Add Telephone' button and then I put a telephone number in new input it created, and if I use Update button, instead of creating a new telephone in database, it replaces the last existing. If I remove the divs, it works as expected.
Now, If I try to add an email or adress, it loads an error :
I got the same results when building my tabs ...
Thanks again for help and time. As this bundle get more and more interest from me, I'll be glad to help adding some help and content to this project in a near future.
Best Regards.