jeudi 14 janvier 2016

What is the correct way to align checkboxes using Twitter Bootstrap without taking up a whole column segment?

I have a bootstrap form that generates potential invoices for each member entity (one per line). Each member's row is starts with a checkbox (without label) to identify which Invoices to flush to the database.

I'm new to Twig and bootstrap and I'm having a problem correctly structuring my template to present this correctly to the user. My current code (below) generates the page ok, although the {{ form_widget(invoice.selected) }} is taking up an entire column block. Is there I a way I can have each checkbox right-aligned some how or included as part of the column block used for the invoice.memberid widget?

{% block body %}
    {{ parent() }}
    <div class="container">
        <div class="row">
            <div class="col-sm-offset-1 col-sm-10 ">
                <div class="row">
                    <h1 class="col-sm-6"> {{ page_title }}:</h1>
                </div>
            </div>

        {{ form_start(form) }}

                 <div class="row">
                      {{ form_label(form.batchevent, 'Batch Invoice Description',{'label_attr': {'class': 'col-sm-12'}}) }}
                      {{ form_widget(form.batchevent, {'attr': {'class': 'col-sm-12'}}) }}
                 </div>

         {% for invoices in form %}
              {#{{ dump(form) }}#}
              {% for invoice in invoices %}
                    <div class="row">
                         <div class="col-sm-1 checkbox">
                              <label>
                                    {{ form_widget(invoice.selected) }}
                              </label>
                         </div>

                         {{ form_widget(invoice.member_id,  {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.amount,      {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.invoicedate, {'attr': {'class': 'col-sm-2 datepicker'}}) }}
                         {{ form_widget(invoice.currency,    {'attr': {'class': 'col-sm-2'}}) }}
                         {{ form_widget(invoice.comments,    {'attr': {'class': 'col-sm-3'}}) }}
                    </div>
              {% endfor %}
         {% endfor %}

                 <div class="row">
                      <input type="submit" value="Generate invoices" class="btn btn-default pull-left"/>
                 </div>

        {{ form_end(form) }}
        </div>
    </div>
{% endblock %}




Aucun commentaire:

Enregistrer un commentaire