Issues with the FlexBox styling of Bootstrap 4 Modals in Internet Explorer causing malfunction

I have designed a confirmation dialog using Bootstrap 4 with the following code snippet:

<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Confirm Navigation</h4>
         </div>
         <div class="modal-body">
            <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
         </div>
         <div class="modal-footer">
            <div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
            <div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
            <div class="clearfix"></div>
         </div>
      </div>
   </div>
</div>

The styling is being displayed correctly in Chrome, Firefox, and Edge, but it seems to be malfunctioning in Internet Explorer.

Chrome Preview:

View here

Internet Explorer 11 Preview: View here

I have also created a JSFiddle link for reference.

cssreactjsinternet-explorerflexboxbootstrap-4

Answer №1

Here is an example of the HTML structure you can use for a "modal-footer" element:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Confirm Navigation</h4>
      </div>
      <div class="modal-body">
        <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
      </div>
      <div class="modal-footer justify-content-start">
        <button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
        <button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
      </div>
    </div>
  </div>
</div>

Answer №2

It has come to my attention that the display flex property is not fully supported in Internet Explorer. To resolve this issue, I made a simple change to the footer by switching its display from flex to block, which effectively solved the problem. Below is the modified code:

<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title>Confirm Navigation</h4>
         </div>
         <div class="modal-body">
            <p>You haven't saved your changes. Are you sure you want to leave this page?</p>
         </div>
         <div class="modal-footer d-block">
            <div class="row">
               <div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
               <div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
            </div>
            <div class="clearfix"></div>
         </div>
      </div>
   </div>
</div>

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

Seamless Authentication - automatic login following registration

Are there any resources available on automatically signing in a user after they have signed up? I could only come up with one potential solution: signing up the user first and then programmatically calling the signIn function provided by next-auth to log ...

reactjsauthenticationnext.jsnext-auth

React Hook Form: Issue with useForm not displaying any errors in formState

Currently in the process of developing an app using T3 stack along with react-hook-form and zodResolver:@hookform/resolvers/zod Below is the zod schema that I have defined: export const AccountSchema = z.object({ id: z.string().uuid().optional(), titl ...

reactjsreact-hook-formzodt3-app

Using React Higher Order Components with several different components

Is it possible to create a React HOC that can accept two components instead of just one wrapped component and toggle between them? For instance, in the code snippet below, rather than having <h3>component one</h3> and <h3>component two< ...

javascriptreactjs

Utilizing Multiple Select Options and CSS Float Styling in Mozilla Firefox

I have been attempting to customize the CSS of a multiple select element. While I am satisfied with how it looks on Chrome, I am facing issues getting it to work correctly on Mozilla Firefox. $('option').mousedown(function(e) { ...

jqueryhtmlcss

Exploring design techniques in React Native

I am currently part of a team working on a react native project with multiple contributors. My goal is to find an effective way to segregate the styling tasks from coding, allowing UI developers to work independently without relying on code developers. In ...

cssuser-interfacereact-nativestyles

Updating the display in React Native

My application receives its theme (colors and styles) from a REST API. Whenever there is a change in the theme on the server, the app is notified through socket communication so that it can fetch the new theme using REST. The theme is retrieved in a Redux ...

reactjsreact-nativeredux

Utilizing CSS to Target IDs Using Classes

Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider... However, I now have a new idea. ...

htmlcss

Chrome fails to load webfont upon page initialization

Encountering a problem with loading a WebFont specifically on Chrome version "48.0.2564.82 m (64-bit)". The issue arises from the webfont not being applied upon page load or navigation, unless I manually refresh the page. Below is the snippet of code fro ...

htmlcssgoogle-chromewebfonts

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

javascriptjqueryhtmlcsshyphenator

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

htmlcss

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Ways to encourage children to adopt a specific trait

Let's discuss a scenario where I have a React functional component like this: const Test = (props: { children: React.ReactElement<{ slot: "content" }> }) => { return <></> } When a child is passed without a sl ...

reactjstypescript

Center Button Horizontally and Vertically with CSS Code

I really need some assistance with getting this button I made to be perfectly centered on both the vertical and horizontal axes of the page. So far, I've managed to center it horizontally, but not vertically. Any advice or guidance would be greatly ap ...

htmlcss

Developing a mock login service in React using asynchronous functions and await keywords

In my project, I am working on creating a mock login button that should return a user object after 5 seconds of clicking the login button. Here is the event handler code for the login button: import UserService from "../services/user"; export default ...

reactjs

Twofold Arrow Styling in CSS

Can someone help me achieve this design: https://i.stack.imgur.com/eBQ1a.png I am attempting to create a double arrow using just one class. I have tried various methods, but nothing seems to be working for me. If anyone has any suggestions or can point ...

htmlcsssvg

Modifying the color of a placeholder in an HTML input using CSS

Version 4 of Chrome now supports the placeholder attribute on input[type=text] elements (and likely other browsers do too). Despite this, the following CSS code does not affect the color of the placeholder text: input[placeholder], [placeholder], *[pla ...

csshtmlplaceholderhtml-input

Here are steps to dynamically display or hide Formik form fields

I am working on a Formik form that I need to customize. Specifically, I want the sub-category field to be disabled until a category is selected by the user. If no category is picked, the sub-category should remain locked for selection. Can someone guide ...

reactjsformsformik

I'm struggling with getting the state.map function in react.js to display the data correctly

Encountering an issue with my code. Trying to fetch data from the server-side (node.js) and saving it using setState(data), the console.log(this.state.data) displays all the data, but mapping it returns nothing. Interestingly, when creating an object in C ...

node.jsreactjsexpress

Autocomplete with Material UI design

Currently, I am working on constructing a form that utilizes Material UI's autocomplete functionality. The field displays chips when selected, but I am encountering an issue with modifying the onDelete prop of the chip component. Despite attempting to ...

reactjsmaterial-ui

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

In my experience, I have been working with C#, HTML coding using VS2010 and MVC. Utilizing VS2010 has proven to be an invaluable tool for me in this process. Currently, I find myself needing to create some straightforward static web pages. I am wondering ...

javascriptjqueryhtmlcssvisual-studio-2010