Смещенные элементы строки формы (начальная загрузка, IE11) - PullRequest
Новая
       13

Смещенные элементы строки формы (начальная загрузка, IE11)

0 голосов
/ 05 сентября 2018

У меня есть следующий HTML-код для модального диалога: 

<div id="modalPaymentStatus" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Payment Status</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputOriginator">Originator</label>
                        <input type="text" class="form-control" id="inputOriginator" name="inputOriginator" max-length="11" pattern="^[A-Z]{6,6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3,3}){0,1}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputStatus">Transaction Status</label>
                        <input type="text" class="form-control" id="inputStatus" name="inputStatus" placeholder="Status" maxlength="4" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputReason" />
                        <input type="text" class="form-control" id="inputReason" name="inputReason" placeholder="Reason" maxlength="5" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputFundsAvailable">Funds Available</label>
                        <input type="text" class="form-control" id="inputFundsAvailable" name="inputFundsAvailable" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputForwardedAgent">Forwarded Agent</label>
                        <input type="text" class="form-control" id="inputForwardedAgent" name="inputForwardedAgent" max-length="11" pattern="^[A-Z]{6,6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3,3}){0,1}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputValue">Amount</label>
                        <input type="number" class="form-control" id="inputValue" name="inputValue" placeholder="value" maxlength="12" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputCcy" />
                        <input type="text" class="form-control" id="inputCcy" name="inputCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="inputFromCcy">FX Details</label>
                        <input type="text" class="form-control" id="inputFromCcy" name="inputFromCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputToCcy" />
                        <input type="text" class="form-control" id="inputToCcy" name="inputToCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputFXRate" />
                        <input type="number" class="form-control" id="inputFXRate" name="inputFXRate" placeholder="1.00" maxlength="12" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputChargeAmount">Charge Amount</label>
                        <input type="text" class="form-control" id="inputChargeAmount" name="inputChargeAmount" placeholder="0.00" max-length="12" />
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Вот так это выглядит в IE11

Modal Dialog

Что я здесь не так делаю? Это проблема с IE11?

Я ожидаю, что вход «Status» и «Reason» будет в одной строке, а также «value» & ccy и два поля «Ccy» вместе с «FXRate». Выше этого поля ввода внутри div "form-row" не могут быть сфокусированы нажатием на них; только путем циклического перемещения по полям с помощью клавиши «TAB» ...

...