Code Monkey home page Code Monkey logo

bootstrap-ie11's Introduction

Bootstrap 5 for IE 11

Bootstrap 5 for IE 11

LICENSE GitHub Super-Linter GitHub stars image NPM Version jsdelivr

Bootstrap 5 drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.

Quick start

  • Download the latest release
  • Clone the repository git clone https://github.com/coliff/bootstrap-ie11.git
  • Install with npm npm install bootstrap-ie11
  • Install with yarn yarn add bootstrap-ie11
  • Install with Composer composer require coliff/bootstrap-ie11

Usage

Just add this in the <head> which will load the CSS and JS - just for IE users.

<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');</script>

If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow:

<link rel="stylesheet" href="/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

The CSS can be loaded via a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

FAQS

What does this fix/polyfill?

  • Workaround for the SVG overflow bug
  • Remove the default vertical scrollbar from textarea
  • Correct the text-wrapping and color inheritance for legend
  • Disable auto-hiding scrollbar to avoid overlap on pre
  • Fixes for card image size bug
  • Fixes for text color and text opacity utility classes
  • Improved layout for justify-content-evenly flex utility
  • Fixes for stacks gap spacing
  • Add the correct display values for template and main
  • Fixes for modals (.modal-dialog-centered and .modal-dialog-scrollable)
  • Fixes for forms (inputs, checkboxes, radio buttons, switches, selects, ranges, placeholders and floating labels)
  • Fix for the btn-close-white SVG icon color
  • Fix for dark carousel previous and next SVG icon colors
  • Fix for valid-tooltip & invalid-tooltip positioning
  • Adds vendor prefixes for user-select-auto and user-select-none utilities
  • Fix for .visually-hidden utility class
  • Fix for vertical rule .vr class
  • Bootstrap 5 Beta 2 is loaded via CDN (The JavaScript in Bootstrap 5 Beta 3 and later is incompatible)
  • Polyfill for CSS custom properties (ie11CustomProperties)
  • Polyfill to fix most JavaScript components (Polyfill)
  • Polyfill to fix tabs (element-qsa-scope polyfill)
  • Fixes for Accordion button icons
  • Fix for border utility classes

Known Issues

  • Internet Explorer 11 does not support vertical alignment of flex items when the flex container has a min-height. See Flexbugs #3 for more details.
  • The ie11CustomProperties polyfill currently removes the !important from any CSS variables with that set. See ie11CustomProperties issue #62.
  • SVG images with .img-fluid are sometimes disproportionately sized. To fix this, add width: 100%; or .w-100 where necessary. This fix improperly sizes other image formats, so this isn't applied automatically.
  • There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding body{font-family:"Segoe UI", Arial, sans-serif;} to your IE11-only style sheet so there isn't a delay in the text displaying.
  • View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues.
  • From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.

Demo

See this in action at: https://coliff.github.io/bootstrap-ie11/tests/

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers

bootstrap-ie11's People

Contributors

coliff avatar dependabot[bot] avatar lgtm-com[bot] avatar marispro avatar re-fish avatar step-security-bot avatar vltansky avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

xenomorph-us air-ambulance huubl pengchen11 vltansky re-fish edekowalski gtbu ctsstc bobby-87 jaradona gwlee-dev lgtm-migrator step-security-bot marispro

bootstrap-ie11's Issues

Wrong table colors

When I link CSS [email protected] I see black rows instead of white in a striped table (IE11), gray rows are still gray. In other browsers everything is alright. If I change it back to beta1 rows are white again as it should be.
black rows

Improve the documentation

Prerequisites

Proposal

Thanks for the "patch"

Improve the documentation, such as loading only CSS, or self-compiling SCSS, which JS libraries do I need to load?
Split the use method, let the user choose more flexible loading method, such as I need to download JS and CSS/SCSS to the local, how to load?

Motivation and context

For example, how do I download these JS documents individually and run them locally?

Semantic error, this: <link rel="stylesheet" href="/css/bootstrap-ie11.min.css">The following line of code is not usable

<script nomodule>
window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');
</script>

repair：

<script nomodule>
window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');
</script>

or better

    <!-- required JavaScript polyfills for IE11 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap-ie11.min.css">
    <script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
    </script>
    <script nomodule>
        window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');
    </script>

What about IE10?

What about IE10 support too?
Just use display:ms-flexbox everywhere that display:flex is used and it should work.

Bootstrap 5.3.0 Alpha Issues

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems

Describe the issue

Bootstrap v5.3.0-alpha3 CSS has some rendering issues on IE11 that v5.2.1 does not.

  • Checkbox icons are not displayed
  • Radio button icons are not displayed
  • Select dropdown icons are not displayed

What version of Bootstrap are you using?

v5.3.0-alpha3

Modal Bootstrap 5 is not working in Chrome

But i have error in Chrome
This is my code

var myModalEl = document.querySelectorAll('#modal-video');
myModalEl.forEach(function(element){
if (typeof(element) != 'undefined' && element != null){
var modal = bootstrap.Modal.getOrCreateInstance(element);
modal.show();
}
});

The error is Uncaught TypeError: bootstrap.Modal.getOrCreateInstance is not a function
If i use original bootstrap.js it works normally

Problems with beta3

Components requiring JS (navbar, dropdowns, carousels and etc.) don't work when I change "beta2" to "beta3" in <script> including Bootstrap JavaScript plugin.
CSS is OK.

polyfill.io new ownership

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems

Describe the issue

There has been a recent development around polyfill.io which is used in this project

Polyfill.io has recently been transferred to a Chinese company called Funnull, which means that the hosting of the service has probably been moved out of the UK and EU.

There's an active thread about it here: https://github.com/polyfillpolyfill/polyfill-service/issues/2834

Alternatively, there's https://polyfill-fastly.io/

https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes

What version of Bootstrap are you using?

5.2.0

Hi, Why can't I use javascript code.. Thanks

Hi, Why can't I use javascript code in IE.. Thanks

<a class="btn header-button"><i class="bi bi-house fw-bold"></i><span class="fw-bold" onclick="hola()"> Home</span></a>
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/estilos.css">

  <!-- Compatible with IExplorer CSS -->
  <link rel="stylesheet" href="./css/bootstrap-ie11.css">
  <script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
  <script nomodule="" crossorigin="anonymous"
    src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
    </script>
  <script nomodule="">window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');
  </script>


  <title>Portal de Servicios al Contribuyente</title>
</head>

<body>
      <div class="justify-content-between">
        <ul id="horizontal-list">
          <li>
            <a class="btn header-button"><i class="bi bi-house fw-bold"></i><span class="fw-bold" onclick="hola()"> Home</span></a>
          </li>
          <li>
            <a class="btn header-button-siigem"><i class="bi bi-door-closed"></i><span class="fw-bold">
                Siigem</span></a>
          </li>
          <li>
            <a class="btn header-button-sesion"><span class="fw-bold"><i class="bi bi-key"></i> Iniciar
                sesión</span></a>
          </li>
          <li>
            <a class="btn header-button"><span class="fw-bold"><i class="bi bi-lock"></i> Crear contraseña</span></a>
          </li>
        </ul>
      </div>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  <script src="./js/principal.js"></script>
</body>

</html>
<script>

  function hola(){
    alert("hola");
  }
</script>

Figure with .img-fluid is not resized

"The fluid image in a figure container is not resized at all making it overflow the content area".
I've met this and found that it is a known issue here. The solution is just to add this code to your css-file:

figure .img-fluid {
    width: 100%;
}

May be it could be solved somehow in the future.

img-fluid broken
img-fluid fixed

Custom navbar-collapse flex property is pushing navbar content to the right.

Hi,

First of all, thanks for the script! By testing it on ie11, I realize that the flex property applied to the .navbar-collapse element pushes the contents of the navbar too far to the right and this creates horizontal scrollbars.

ie-11-navbar-flex

.navbar-collapse { flex: 1 0 100%; }

I think this property should be removed.

Bootstrap methods not working

Hi

I have added your code to my page as well as loading the latest version of Bootstrap using Require.JS and most things seem to be working great in IE11 now (thank you!). The only issue I have at the moment is that Bootstrap methods don't seem to be working. I am using jQuery which are still supported by Bootstrap but have also tried the vanilla JS methods but still not working.

For example, showing modals, I have a JS function that performs an AJAX request to get some data which is then shown in a modal.

At the moment it uses:
$('#mymessage').modal('show');
but it says: Object doesn't support property or method 'modal'.

The vanilla JS method I tried is:

var myModal = new bootstrap.Modal(document.getElementById('mymessage'));
myModal.show();

but it says 'bootstrap' is undefined.

The code I have added to support IE11 is:

<!-- Fix for IE11 -->
<link rel="stylesheet" href="css/external/manual/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
<script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"></script>
<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
<!-- Fix for IE11 -->

Vertical rule styling

Need to add CSS for it to display... something like:

  .vr {
    border-right: 1px solid rgb(33, 37, 41);
  }

Fix for `.justify-content-evenly` flex utility

This doesn't work in IE11

.justify-content-evenly {
  justify-content: space-evenly !important;
}

image

should be fixed with a similar flex property such as:

.justify-content-evenly {
  justify-content: space-around !important;
}

Then it'll appear like this:

image

Add background-color classes bg-*

Hi guys,

I recently updated my webapplication to bootstrap 5 and all my background-colors were gone after having a look at it with IE11. The IE dev-tools and CANIUSE.com confirmed, that the var() command is not working in IE11.
image

You guys already fixed that text-* colors. Is it possible to fix the bg-* colors too?

Thank you very much!

'BootstrapDialog' is undefined

Hi, there
I'm applying this amazing project to my website, but still, all the BootstrapDialog's gone under IE11, and it keeps saying

SCRIPT5009: 'BootstrapDialog' is undefined
dialog.js (1, 581)

And here's my dialog.js

define(function (require, exports, module) {
    function showMessage(options) {
        if (typeof (options) !== 'object') return
        BootstrapDialog.show({
            title: options.title,
            message: options.message || (options.load ? messages.Loading.text : ''),
            closable: typeof (options.closable) === 'undefined' ? true : options.closable,
            closeByBackdrop: typeof (options.closeByBackdrop) === 'undefined' ? true : options.closeByBackdrop,
            closeByKeyboard: typeof (options.closeByKeyboard) === 'undefined' ? true : options.closeByKeyboard,
            type: options.type || BootstrapDialog.TYPE_INFO,
            buttons: getDialogButton(options.buttonNameList, options.callback),
            onshow: options.onshow,
            onshown: onshown,
            onhide: options.onhide,
            onhidden: options.onhidden
        })

        function onshown(dialog) {
            if (options.load) {
                dialog.getModalBody().load(options.load.url, options.load.data, function () {
                    if (typeof options.load.callback === 'function') {
                        options.load.callback(dialog)
                    }
                })
            }
            if (options.onshown) {
                options.onshown(dialog)
            }
            var inputs = dialog.$modal.find('input[type=text], input[type=password]')
            if (inputs.length > 0) {
                $(inputs[0]).focus().select()
            }
            if (options.callback) {
                dialog.$modal.keypress(function (event) {
                    if (event.keyCode == 13) {
                        event.cancelBubble = true
                        event.returnValue = false
                        var focusElements = $(":focus")
                        if (focusElements && focusElements.length > 0 && focusElements[0].tagName == 'DIV') {
                            dialog.$modal.off('keypress')  // trigger submit one time when focus on the dialog
                            options.callback({ name: 'submit' }, dialog)
                        } else {
                            options.callback({ name: 'submit' }, dialog)
                        }
                        return false
                    }
                })
            }
        }
    }
    exports.showMessage = showMessage
})

Anyone can help?

Flexbox Gap Polyfill

The .gap CSS classes don't work in IE11 due to lack of support for Flexbox gap, but it can be polyfilled with CSS with something like:

.gap-3 > * {
  margin-bottom: 1rem;
}

.gap-3 > *:last-child {
  margin-bottom: 0;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.