Использование d-flex и flex-wrap в Inte rnet Explorer 11 - PullRequest
Новая
       11

Использование d-flex и flex-wrap в Inte rnet Explorer 11

0 голосов
/ 27 марта 2020

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

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

enter image description here

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

enter image description here

Вот используемый код 

<div class="d-flex flex-wrap justify-content-between">
    <div *ngFor="let field of fieldsToDisplay;let i = index"
         ng-class="'address-single-div-class w-100': field.FieldType.toString() == FieldType_Type.Textarea.toString(), 'address-single-div-class': field">
        <input-field 
            *** series of inputs ***
        </input-field>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Хорошо, поэтому я исправил свою проблему, добавив width:50% ко второму div, в котором есть поля ввода. Вы можете увидеть изображение, которое я приложил в моем вопросе для справки. Очевидно, flex-wrap не выполняет свою работу должным образом в IE11 из-за некоторых ошибок. Таким образом, вместо упаковки элементов IE11 расширяет контейнер. Добавляя ширину, я предопределил размер контейнера, чтобы он фактически обернул входные поля и дал им полный входной размер, поэтому мне не нужно использовать flex-fill. Кроме того, это не влияет на отображение в Chrome или Firefox.

0 голосов
/ 30 марта 2020

Попробуйте добавить col-* классы для полей ввода, проверьте следующий пример: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container mt-3"> 
        <p>Use .flex-fill on flex items to force them into equal widths:</p>
        <div class="d-flex flex-wrap justify-content-between mb-3">
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 1" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 2" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 3" /> 
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 4" /> 
        </div> 
    </div>
</body>
</html>

Результат в браузере IE11:

enter image description here

...