jПодпись не перемещается с дисплея: нет для отображения: правильно блокировать в многостраничной форме - PullRequest
Новая
       16

jПодпись не перемещается с дисплея: нет для отображения: правильно блокировать в многостраничной форме

0 голосов
/ 27 сентября 2019

Я прочитал много материала, но не нашел ответа на свой конкретный вопрос.У меня есть многостраничная форма, которая использует jSignature в качестве последней вкладки.Это в основном строка для строки с сайта W3Schools, но с моей формой.В любом случае, он использует css для отображения: нет на вкладках, тогда код меняет отображаемую вкладку на display: block.Это прекрасно работает для всего, кроме моей jSignature.Это ясно читает изменение, поскольку оно видно (то есть не отображается: нет), но оно сжато и непригодно для использования.ДО ... вы изменяете размер экрана.Тогда это выскакивает.Я перепробовал все виды стилей в css и изменил отображение: введите в JS, но он делает то же самое.

Вот mcve: 

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="height=device height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
.tab {
  display: none;
  }
</style>
<body>
<form id="regForm" action="/action_page.php">
   <div class="tab tab1">
  Carrier:
  <p><input type="text" oninput="this.className = ''" name="carrier" value="My Company"></p>
  Location:
<p><select oninput="this.className = ''" name="location">
<option value="" disabled selected>Choose your location</option>
<option oninput="this.className = ''" value="PDX">PDX</option>
<option oninput="this.className = ''" value="SEA">SEA</option>
</select></p>
  </div> 
<div class="tab tab2">
Sign in the box below:
      <input type="button" class="clear-button" value="Clear" style="float:right;"/>
      <div class="signature-panel">
      </div>
 </div>
<img id="rendered" src="" style="display:none">
<br>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
    <span class="step"></span>
    <span class="step"></span>
</form>

<script>
  $('.signature-panel').jSignature();

  $('.clear-button').on('click', function(e) {
    $('.signature-panel').jSignature("reset");
  });


var currentTab = 0;
showTab(currentTab);
function showTab(n) {
  var x = document.getElementsByClassName("tab");


  x[n].style.display = "block";


  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
}
function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  if (n == 1 && !validateForm()) return false;
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}
function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
  }
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid;
}
</script>

</body>
</html>

Иссылка для проверки: https://www.w3schools.com/code/tryit.asp?filename=G8DPE45DOMRR

Пожалуйста, помогите!Спасибо!

1 Ответ

0 голосов
/ 27 сентября 2019

Я заменил отображение: нет с высотой: 0; переполнение: скрыто и наоборот для отображения: блок.Отлично работает сейчас!

...