I use Webshim polyfill to guide a user step by step through parts of a form. A date input is hidden at page load style="display: none;". It's width is specified in percentage. Webshim sets the width of the input wrapper element (that is shown instead of the actual date input) at page load to a fixed width. It does not update the width of the wrapper element when it is shown $('#initiallyHidden').show();. But it updates the width if the user resizes the window. How can I trigger the update manually? Is it possible to trigger the update automatically on 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>