how to align widths for input-group-addon

Question

Hi I have the following html file, which consists of 3 input options. As follows

<script type="text/ng-template" id="dashboard_assigngroup_popup.html">

    <div class="modal-header modal-header2">
        <h3 class="modal-title">Assign Chart Group</h3>
    </div>

    <div class="modal-body">
        <table class="table">
            {%verbatim %}

            <tr>
                <td>
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Chart title</span>
                        <select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Chart group</span>
                        <select type="input" class="form-control" ng-model="final_data.group" ng-options="c.id as c.name for c in chartgrouplist" required ng-cloak>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Order </span>
                        <input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg">
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="4">
                    <div class="modal-footer">
                        <button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button>
                        <button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button>
                    </div>
        </table>
        {% endverbatim %}
    </div>

</script>

But the input-group-addons are not aligned. Tried to align using CSS, but failed to do so. How can I align this input-group-addons? Any suggestions guys? Thanks in advance.

Answer 1

Then solution lies in your html

1. Each label together with its parent must be in a table cell
2. Each input option and its parent must be in a table cell

here is a snippet (add a border to all td and see the alignment)

 <script type="text/ng-template" id="dashboard_assigngroup_popup.html"></script> <div class="modal-header modal-header2"> <h3 class="modal-title">Assign Chart Group</h3> </div> <div class="modal-body"> <table class="table"> {%verbatim %} <tr> <td class="input-group" style="padding:1%;"> <span class="input-group-addon">Chart title</span> </td> <td> <select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak></select> </td> </tr> <tr> <td> <span class="input-group-addon">Chart group</span> </td> <td> <select class="input-group" style="padding:1%;"> </select> </td> </tr> <tr> <td> <div class="input-group" style="padding:1%;"></div> <span class="input-group-addon">Order </span> </td> <td> <input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg"> </td> </tr> <tr> <td colspan="4"> <div class="modal-footer"> <button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button> <button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button> </div> </table> {% endverbatim %} </div> </script>