我使用Webshim polyfill逐步引导用户完成表单的各个部分。日期输入在页面加载时隐藏style="display: none;"
。它的宽度以百分比指定。Webshim 将页面加载时输入包装元素(显示而不是实际日期输入)的宽度设置为固定宽度。它不会在显示时更新包装元素的宽度$('#initiallyHidden').show();
。但如果用户调整窗口大小,它会更新宽度。如何手动触发更新?是否可以在节目中自动触发更新?
webshim.activeLang('de');
webshims.setOptions('forms-ext', {
replaceUI: true
});
webshims.polyfill();
webshims.cfg.no$Switch = true;
$('#showHiddenInput').click(function () {
$('#initiallyHidden').show();
});
.full-width {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form action="">
<button id="showHiddenInput">show hidden input</button>
<div id="initiallyHidden" style="display: none;">
<input name="initiallyHidden" type="date" class="full-width" required>
<label for="initiallyHidden">Input was initially hidden and should have full width (100%)</label>
</div>
</form>
</body>
</html>