Индикатор выполнения jquery-ui не виден в IE11 - PullRequest
Новая
       3

Индикатор выполнения jquery-ui не виден в IE11

0 голосов
/ 26 октября 2018

У меня есть окно с входом и индикатором выполнения jquery ui ниже.
Бар должен иметь ту же ширину, что и поле ввода.К сожалению, Internet Explorer, похоже, нуждается здесь в особом внимании, поскольку он вообще не отображает панель.
Единственное, что до сих пор работало, это установило фиксированную ширину.Но это, очевидно, не мое решение.
Я искал эту проблему, но ничего не смог найти.
Любой совет по этому поводу?
Редактировать:
Причина, почемуЯ использовал col-auto: Как центрировать строку начальной загрузки 4 по вертикали и горизонтали, когда есть несколько строк до
Чего я хочу достичь в целом: Вложить строки внутри столбца начальной загрузки 4 

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

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Проблема здесь в том, что класс col-auto, класс без измерения и IE11 не может "понять", насколько велика ваша строка "#progress".Вы можете удалить этот класс, используя фиксированный: col, col-1, col-2, col-3 ... все, что вы хотите, и вы увидите, что также IE11 начнет работать.

Я знаю, ваш следующий вопрос будет " Но почему Chrome и Firefox работают? ", потому что IE11 имеет несколько ограничений при использовании flexbox (https://caniuse.com/#search=flexbox), поэтому вы должны помочь емучтобы понять, чего ты действительно хочешь, потому что иногда ... он совершенно безбашенный!: D: D: D

Кстати, это не большая проблема. Зная его ограничения, ты можешь достичь своего результата, пытаясьдругие пути. В данном конкретном случае я действительно не знаю, что вы пытаетесь сделать, но я могу опубликовать вам пример, чтобы помочь вам найти решение.

Например, хотите ли вы 100% индикатор прогресса? Хорошо, используйте 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>

Или, может быть, вы предпочитаете хорошо центрированную форму, похожую на ваш пример?Отлично, используйте поменьше 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>

... и так далее.Поиграйте с этими классами и в этой работе всегда помните: помогите IE11 ... или, в целом, помогите Explorer понять, чего вы действительно хотите!;)

Серьезно, надеюсь, это поможет.

Ура!

РЕДАКТИРОВАТЬ 1

Попытка скопировать ваше изображение: https://i.stack.imgur.com/fTcRy.png Я написал это.Помните, используйте col- * для вашего индикатора выполнения.Это все по центру вертикально и горизонтально.И это хорошо работает также с 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>
0 голосов
/ 26 октября 2018

Проблема с вашим файлом bootstrap.min.css. Я изменил ваш путь начальной загрузки cdn, и он работает для меня:

Новый загрузочный 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...