Группа ввода TwitterBootstrap и поле ввода в теге td

У меня есть таблица, и для одного из столбцов я хочу, чтобы каждая строка в этом столбце содержала поле ввода, а рядом с полем ввода - значок со знаком плюс. ниже код у меня есть

<td data-rowis-yellow=false data-parent='email'>
    <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
    <span class="badge"><span class="glyphicon glyphicon-plus"></span></span>
</td>

однако это создает поле ввода в одну строку, а значок значка находится под текстовым полем. Я хочу, чтобы значок значка находился справа от текстового поля. есть идеи как этого добиться?

Вот как выглядит весь шаблон

  <table class="table">
                <thead>
                    {{#each headers}}
                    <th>{{this}}</th>
                    {{/each}}
                </thead>
                <tbody>
                    {{#each all_rows}}
                    {{#if this.attributes.isMaster}}
                    <tr data-row-type='final' style="background-color: green;">
                    {{else}}
                    <tr data-row-type='staged' style="background-color: grey;">
                    {{/if}}
                        <td data-parent='not-conflict'>
                            {{#if_eq this.attributes.isMaster false}}
                                <input type='checkbox'>
                            {{/if_eq}}
                        </td>
                        <td data-rowis-yellow=false data-parent='firstname'><input type='text' placeholder='First' value='{{this.attributes.firstname}}' title='{{this.attributes.firstname}}'></td>
                        <td data-rowis-yellow=false data-parent='lastname'><input type='text' placeholder='Last' value='{{this.attributes.lastname}}' title='{{this.attributes.lastname}}'></td>
                        <td data-rowis-yellow=false data-parent='businessname'><input type='text' placeholder='Buisines' value='{{this.attributes.businessname}}' title='{{this.attributes.businessname}}'></td>
                        <td data-rowis-yellow=false data-parent='email'>
                            <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
                            {{#if_eq this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        </td>
                        <td data-rowis-yellow=false data-parent='address'><input type='text' placeholder='Address' value='{{this.attributes.address}}' title='{{this.attributes.address}}'></td>
                        <td data-rowis-yellow=false data-parent='country'><input type='text' placeholder='Country' value='{{this.attributes.country}}' title='{{this.attributes.country}}'></td>
                        <td data-rowis-yellow=false data-parent='phones'>
                        {{#each this.attributes.phones}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Phone' value=''>
                        {{/each}}
                        </td>
                        <td data-rowis-yellow=false data-parent='twitters'>
                        {{#each this.attributes.twitters}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Twitter' value=''>
                        {{/each}}
                        </td>
                        <td data-rowis-yellow=false data-parent='linkedin'><input type='text' placeholder='LinkedIn' value='{{this.attributes.linkedin}}' title='{{this.attributes.linkedin}}'></td>
                        <td data-rowis-yellow=false data-parent='urls'>
                        {{#each this.attributes.urls}}
                            <input type='text' value='{{this}}' title='{{this}}'>
                            {{#if_eq ../this.attributes.isMaster false}}
                                <span class="badge hover-add" data-funct="AddExtraField"><span class="glyphicon glyphicon-plus"></span></span>
                            {{/if_eq}}
                        {{else}}
                            <input type='text' placeholder='Url' value=''>
                        {{/each}}
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>

Из того, что я могу сказать, кажется, что столбец не становится достаточно большим, чтобы поместиться в поле ввода и значок рядом друг с другом. Единственный способ, которым я могу получить их в одной строке, это вложить их в систему сетки начальной загрузки, но это просто кладет 2 элемента друг на друга.

<td data-rowis-yellow=false data-parent='email'>
    <div class="row">
        <div class='col-md-6>
            <input type='text' placeholder='Email' value='{{this.attributes.email}}' title='{{this.attributes.email}}'>
        </div>
        <div class='col-md-6'>
            <span class="badge"><span class="glyphicon glyphicon-plus"></span></span>
        </div>
   </div>
</td>

0 ответов

Другие вопросы по тегам