выравнивание всех полей ввода идеально - PullRequest
Новая
       19

выравнивание всех полей ввода идеально

0 голосов
/ 06 февраля 2020

Я хочу выровнять все поля ввода в одной строке внутри таблицы.

В настоящее время у меня есть 3 поля ввода и 2 поля выбора в таблице. Они отображаются так:

enter image description here

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

Это код, который я использовал для отображения этого. 

<div class="content">

        <div class="white-bg md-whiteframe-4dp">
            <table class="dataTable row-border hover" datatable="ng" dt-options="vm.dtOptions">
                <thead>
                    <tr>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">S.No.</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Material Group</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Estimated Quantity</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Discount Rate</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Currency</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Total Discount</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in ::vm.tableData">
                        <td>
                            {{row.id}}
                        </td>
                        <td>

                            <md-input-container class="md-block">
                                <md-select ng-model="row.materialGroupName" placeholder="Weapon">
                                    <md-option value="null" selected disabled>Material Group Name</md-option>
                                    <md-option value="group1">Group 1</md-option>
                                    <md-option value="group2">Group 2</md-option>
                                    <md-option value="group3">Group 3</md-option>
                                </md-select>
                            </md-input-container>

                        </td>
                        <td>

                            <md-input-container class="md-block">
                                <input type="number" ng-model="row.quantity">
                            </md-input-container>

                        </td>
                        <td>

                            <md-input-container class="md-block">
                                <input type="number" ng-model="row.discountRate">
                            </md-input-container>


                        </td>
                        <td>

                            <md-input-container>
                                <md-select class="md-block" ng-model="row.currency">
                                    <md-option value="null" selected disabled>Select Currency</md-option>
                                    <md-option value="inr">INR</md-option>
                                    <md-option value="usd">USD</md-option>
                                    <md-option value="gbp">GBP</md-option>
                                </md-select>
                            </md-input-container>

                        </td>
                        <td>

                            <md-input-container class="md-block">
                                <input type="number" ng-model="row.total">
                            </md-input-container>

                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

I ' Мы также пытались убрать поле, которое md-input-container приносит с собой, но у меня это не сработало.

...