jquery-ui progress bar not visible in IE11

Question

I have a window with an input and a jquery ui progress bar below.
The bar should have the same width as the input field. Unfortunately the Internet Explorer seems to need some special care here as it doesn't display the bar at all.
The only thing that worked by now was to set a fix width. But that's obviously not my solution of choice.
I searched for this issue but I couldn't find anything.
Any advice for this?
Edit:
The reason why I used col-auto: How to center a bootstrap 4 row vertically and horizontally when there are some rows before
What I want to achieve in general: Nest rows inside a bootstrap 4 column

$(document).ready(function() {
  $("#progress").progressbar();
    $("#progress").progressbar("value", 50);
});

#progress {
  height: 10px;
}

#progress .ui-progressbar-value {
  background: red;
}

<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

</head>

<body>
  <div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-auto stop-align-center">
        <div class="row">
          <div class="col-6">
            <input type="text" id="input" />
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</body>

</html>

Could you explain this a bit more? As I'm using a cdn to import jquery I don't know where this script should come from. Additionally I would say it's a css issue. The code works well in any other browser. I should also say that this is just a sample code. In "reality" i got a bootstrap.js where I import my used widgets. — TimSch, Oct 26 '18 at 13:07

ReSedano · Accepted Answer · 2018-10-27T01:04:22.267

The problem here is the class col-auto, a class with no-dimention and IE11 can't "understand" how big is your "#progress" bar. You could remove that class using a fixed one: col, col-1, col-2, col-3... whatever you want and you'll see that also IE11 will begin to work.

I know, your next question will be "But why Chrome and Firefox work?" 'cause IE11 have several limitation using flexbox (https://caniuse.com/#search=flexbox) so you have to help him to understand what you really want 'cause sometimes... he is a completly bullheaded! :D :D :D

BTW, it is not a big problem here. Knowing his limitations, you can achieve your result trying another ways. In this particular case, I really don't know what you are trying to do, but I can post you some exemple to help you to find a solution.

For exemple, Do you want a 100% progress bar? Good, use col

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});

#progress {
  height: 10px;
}


#progress .ui-progressbar-value {
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="container-fluid vertical-center">
  <div class="row justify-content-center task">
  
    <div class="col stop-align-center">
          <!-- ^^^^ change here!-->
      <div class="row">
        <div class="col">
          <form>
            <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
          </form>
        </div>
      </div>
      <div class="row" id="wrapper">
        <div class="col">
          <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
            <div class="col">
              <div id="progress"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Or maybe do you prefer a well centered form similar to your exemple? Excellent, use a smaller col-4:

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});

#progress {
  height: 10px;
}


#progress .ui-progressbar-value {
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-4 stop-align-center">
             <!-- ^^^^ change here!-->
        <div class="row">
          <div class="col">
            <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

... and so on. Play with those classes and, in this work, always remember: Help IE11... or, more in general, help Explorer to understand what you really want! ;)

Seriously, hope it helps.

Cheers!

EDIT 1

Trying to copy your image: https://i.stack.imgur.com/fTcRy.png I wrote this. Remember, use a col-* for your progressbar. It is all centered vertically and horizontaly. And it works well also with IE11 ;)

$(document).ready(function() {
    $("#progress").progressbar({
        value: 50
    });
});

body{
      height: 100vh;
      display: flex;
      align-items: center;
    }

    #progress {
      height: 10px;
    }

    #progress .ui-progressbar-value {
      background: red;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        content
      </div>
      <div class="col">
        content
      </div>
      <div class="col">
        <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4">
        <div id="progress" class="mb-3"></div>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
      </div>
    </div>
  </div>
  </body>

Thank you very much! I already knew that IE is sometimes a bit weird. But until now I didn't find a documentation or so what you need to know if you need IE support. I edited my question with what I actually want to achieve. When I don't use col-auto the whole stuff is not centered anymore (well in IE this doesn't work well too). Could you say how to avoid col-auto and still achieve what I want? Additionally why do I get different results when using different bootstrap sources? (See the other answer) — TimSch, Oct 26 '18 at 23:35
In the other answer there isn't any bootstrap CSS 'cause the link used to include it don't have the attibute `rel="stylesheet"` and then it works because there isn't the "flexbox" problem. — ReSedano, Oct 27 '18 at 00:06
Ha you're right. Any thoughts why I get in trouble when I'm not using col-auto? — TimSch, Oct 27 '18 at 00:14
You want center vertically and horizontally your code snippet, right? It is something similar to this image https://i.stack.imgur.com/fTcRy.png and where you have [...] you want to put your progress bars. Did I get it right? — ReSedano, Oct 27 '18 at 00:30
the first [...] is my progress bar. The second one is a button group. So yes you're right! — TimSch, Oct 27 '18 at 00:39

score 1 · Answer 2 · answered Oct 26 '18 at 13:26

The problem is with your bootstrap.min.css file i have changed your bootstrap cdn path and it works for me:

New bootstrap cdn:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<html>

<head>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

</head>

<body>
  <div class="container-fluid vertical-center">
    <div class="row justify-content-center task">
      <div class="col-auto stop-align-center">
        <div class="row">
          <div class="col-6">
            <input type="text" id="input" />
          </div>
        </div>
        <div class="row" id="wrapper">
          <div class="col">
            <div class="row">
              <!-- not unnecessary because in production there are more rows in parent col! -->
              <div class="col">
                <div id="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $("#progress").progressbar();
      $("#progress").progressbar("value", 50);
    });
  </script>
  <style>
    #progress {
      height: 10px;
    }
    
    #progress .ui-progressbar-value {
      background: red;
    }
  </style>
</body>

</html>

I used the CDN for this question. In "reality" I installed it via npm (v4.1.3) and am importing it to my main css file. The strange thing is that you're right. When I try your snippet it works. Do you have an idea why I got problems using `"bootstrap": "^4.1.3"` as dependency? — TimSch, Oct 26 '18 at 13:59
I think you need to check if there is any IE related settings in bootstrap": "^4.1.3 that you need to add or enable form polyfills file — Vikas Jadhav, Oct 26 '18 at 14:02

jquery-ui progress bar not visible in IE11

2 Answers2