0

I have seen that this question had been asked before and I tried the different answers provided, however, none seemed to work on my code. I am working on fixing a series of inputs that are displaying in two columns in Chrome and Firefox, but not in IE11.

This is how it looks on Chrome

enter image description here

This is how it looks on IE11

enter image description here

Here is the code being used

<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>
Improve this question
2

2 Answers 2

Reset to default
0

Try to add the col-* classes for the input fields, please check the following sample:

<!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>

The result in IE11 browser:

enter image description here

Improve this answer
1
  • Oh I already fixed the problem, which I am going to write the answer for, but thank you for replying :), this coulld be an alternative way of fixing it.
    – cyber_angel
    Commented Apr 2, 2020 at 20:28
0

Ok so I fixed my problem by adding width:50% to the second div that has the input fields. You can see the image I attached in my question for reference. Apparently, flex-wrap doesn't do its job properly in IE11 due to some bugs. So instead of wrapping the elements, IE11 expands the container. By adding the width I predefined the container's size, that way it actually wraps the input fiels AND give them the full input size, so I do not need to use flex-fill. Plus, it doesn't affect the display in Chrome or Firefox.

Improve this answer
1
  • 1
    Congratulation. I suggest you to try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.^_^
    – Zhi Lv
    Commented Apr 3, 2020 at 6:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.