Utilizing d-flex and flex-wrap for optimal layout display in Internet Explorer 11

I have come across this particular question before and I have attempted the various solutions provided, but unfortunately none of them seem to be working with my code. I am currently trying to address an issue where a series of inputs are displaying in two columns on Chrome and Firefox, however they are not formatting correctly on IE11.

Below is how it appears on Chrome:

https://i.sstatic.net/Dvlqn.png

And this is how it looks on IE11:

https://i.sstatic.net/KZEU9.png

Here is the code snippet that is causing the problem:

<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>
csstwitter-bootstrapbootstrap-4flexboxinternet-explorer-11

Answer №1

Make sure to include the col-* classes for the input fields, as shown in this example:

<!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>Apply .flex-fill on flex items to ensure 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>

Here is how it appears in IE11 browser:

https://i.sstatic.net/9sABi.png

Answer №2

After some troubleshooting, I managed to resolve the issue by including width:50% in the second div containing the input fields. Check out the image I uploaded with my initial question for more details. It seems that flex-wrap doesn't function correctly in IE11 due to certain bugs. Instead of wrapping the elements, IE11 expands the container itself. By setting a specific width, I was able to ensure that the container wraps the input fields appropriately while maintaining their full input size, eliminating the need for flex-fill. The best part is that this adjustment has no negative impact on display in Chrome or Firefox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

htmlcssbuttonformatting

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

jqueryhtmlcsstwitter-bootstrapangular-ui-bootstrap

I am experiencing difficulties with my bootstrap module not loading

Could you please investigate why my module isn't loading? The module is supposed to load under the specified conditions in the third last column, but when I test the code, it doesn't work. Can you assist me in identifying what might be causing th ...

htmlcss

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

javascriptjqueryhtmlcss

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

Is there a way to apply an opacity of 0.5 to only the background image in my jumbotron, without affecting the text? Currently, when I set the opacity for the background, it also affects the text. How can this be resolved? Below is the custom CSS file: .j ...

cssbootstrap-4

What is the best way to turn an entire table into a clickable link that leads to a different HTML page?

I have created a table that I want to turn into a button linking to another page. The table's values need to be changeable based on data from a database, such as changing the parameter to pH and the value to 7. However, the button should redirect to t ...

javascripthtmlcss

Creating components with custom backgrounds using inline styles in JavaScript with base64 encoding

I have a basic block with a base 64 background: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #footer { background: #00b2d6 url("data:image/png;base64,iVBORw0KGgoAAAANSUh ...

cssreactjsbase64

Use CSS to configure the mouse wheel for horizontal scrolling

Looking to create a horizontal page layout, but when I scroll with the mouse wheel the content only moves vertically. Is there a way to enable horizontal scrolling using the mouse wheel? Does CSS have a property for this? For instance, is there something ...

htmlcssscrollmouse

The alignment of the images is off, with varying heights that do not match

My current issue involves images appearing in varying heights and the text underneath not aligning properly. Here is the markup: I have six row containers to showcase 6 different images. <div class="row"> <div class="posts"> <im ...

cssimagealignmentheightoverflow

Changing CSS classes with each click of the user, using Jquery

Looking for a way to seamlessly switch between two links with different CSS classes each time a user clicks? Here's what's currently happening: <a class="class1" id="class1">Class1</a> <a class="class2" id="class2">Class2</a ...

javascriptjqueryhtmlcss

What is the best way to add stripes to a button for a colorful touch

Can the button be styled with colors similar to those shown in the image? https://i.sstatic.net/3o1Jb.png ...

javascripthtmlcss

How can JQuery detect input in the fields?

I have the following HTML code and I am looking to trigger a function based on the input in any of the input fields, regardless of the field number. <input type="text" pattern="[0-9]*" name="code" maxlength="1" au ...

javascripthtmljquerycss

Utilize AJAX JQuery to Transmit POST Data

I am facing an issue with sending the selected item from a Bootstrap dropdown to my controller using the POST method. Unfortunately, I am encountering difficulties in getting it to work. Within the dropdown, I am fetching records from the database and dis ...

javascriptphpjqueryajaxtwitter-bootstrap

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

htmlcssangularlabel

Transform the appearance of a complex image by altering its color using CSS

In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...

htmlcssimage

Developing alternatives for CSS Grid

Currently, I am faced with an intriguing challenge involving a layout that includes a container containing 9 div elements. Each of these divs is assigned one of three classes: column-1, column-2, or column-3. <div class="grid cols-3"> <div cl ...

htmlcssflexboxcss-grid

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Adding material-ui library to a stylesheet

Can I include @material-ui/core/colors/deepOrange in my CSS file? I want to import this library and use it as shown below: import deepOrange from '@material-ui/core/colors/deepOrange'; import deepPurple from '@material-ui/core/colors/deepPu ...

cssmaterial-ui

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

What is the best way to add borders to the cities on interactive SVG maps?

I'm currently developing Interactive SVG Maps showcasing Turkey. The map consists of 81 cities, each represented by <g> elements, and their respective districts, created as child elements within the city elements. It's worth noting that the ...

javascriptjqueryhtmlcsssvg