coliff / bootstrap-ie11 Goto Github PK

View Code? Open in Web Editor NEW

94.0 4.0 15.0 1.01 MB

Internet Explorer 11 compatibility solution for Bootstrap 5

Home Page: https://coliff.github.io/bootstrap-ie11/

License: MIT License

SCSS 12.24% HTML 87.76%

bootstrap css polyfill internet-explorer

bootstrap-ie11's Issues

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.

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

I think this property should be removed.

List Group background colors not showing

Prerequisites

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

Describe the issue

List group background colors are not working as expected:
https://coliff.github.io/bootstrap-ie11/tests/#list-group

What version of Bootstrap are you using?

5.2.0-beta1

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

This doesn't work in IE11

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

should be fixed with a similar flex property such as:

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

Then it'll appear like this:

Vertical rule styling

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

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

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>

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.

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.

What about IE10?

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

Radio Buttons aren't perfectly centered

https://coliff.github.io/bootstrap-ie11/tests/#checks

Font gets overwritten

Hi,

My font get overwritten by:

bootstrap-ie11/scss/_reboot.scss

Lines 1 to 3 in fedb7b5

    
           body { 
        
             font-family: "Segoe UI", Arial, sans-serif; 
        
           }

Did you set this for a reason?

Thanks for sharing this package BTW

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.

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

Thank you very much!

Add gutter examples/tests

https://getbootstrap.com/docs/5.3/layout/gutters/

'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?

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.

Improve the documentation

Prerequisites

I have searched for duplicate or closed feature requests
I have read the contributing guidelines

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>

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

Validation tooltips are not positioned correctly

The tooltip version of the form validation feedback works, but is not positioned correctly:

I have created a minimal reproduction here.

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

Tabs (JavaScript) are not working

I noticed there wasn't a Tabs example?

Is that because there isn't a polyfill for the SelectorEngine function?

Switch CSS

We need to add the custom-form-switch CSS from Bootstrap 4

REF: https://v5-bootstrap.christianoliff.com/docs/5.0/forms/checks/#switches

Bootstrap methods not working

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

Offcanvas component doesn't work

REF: https://getbootstrap.com/docs/5.0/components/offcanvas/

https://coliff.github.io/bootstrap-ie11/tests/#offcanvas

Modal Bootstrap 5 is not working

Hi
I use https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js but there is a error in my project
Uncaught TypeError: bootstrap.Modal.getOrCreateInstance is not a function
and
Object doesn't support property or method 'closest'

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

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

coliff / bootstrap-ie11 Goto Github PK

bootstrap-ie11's Issues

Prerequisites

Describe the issue

What version of Bootstrap are you using?

Prerequisites

Proposal

Thanks for the "patch"

Motivation and context

Prerequisites

Describe the issue

What version of Bootstrap are you using?

Prerequisites

Describe the issue

What version of Bootstrap are you using?

Recommend Projects

Recommend Topics

Recommend Org