У меня есть fancybox, который отображается, когда пользователь нажимает кнопку.
У fancybox изначально есть 1 раскрывающееся меню, и в зависимости от того, что пользователь нажимает, отображаются различные элементы формы.Проблема в том, что fancybox достаточно широк для первоначального раскрывающегося списка, и в нем просто есть полосы прокрутки, как только элементы формы отображаются вместо изменения размера.
Как я могу изменить размер fancybox в этом сценарии?
$(document).ready(function() {
$('#clickme').fancybox();
$('#substrate').change(function() {
$this = $(this);
if($this.val() != 'select') {
if($this.val() == 'metal') {
console.log('$this = '+$this.val());
$('#ribConf').show();
$('#rust').show();
$('#fancyform').show();
}
} else {
$('#fancyform').hide();
}
});
});
<a id="clickme" href="#fancybox">click me</a>
<div id="fancybox" style="display:none;">
<p>
<label for="substrate">Substrate</label>
<select id="substrate" name="substrate">
<option value="select" selected="selected">-- Select --</option>
<option value="metal">Metal</option>
<option value="singleply">Single-Ply</option>
<option value="asphalt">Asphalt</option>
</select>
</p>
<form id="fancyform" style="display:none;">
<p>
<label for="squareFeet">Square Feet</label>
<input type="text" name="squareFeet" />
</p>
<p>
<label for="square">Square</label>
<input type="text" name="square" readonly="readonly"/>
</p>
<p id="ribConf" style="display:none;">
<label for="ribConf">Rib Configuration</label>
<input type="text" name="ribConf" />
</p>
<p id="rust" style="display:none;">
<label for="rust">Rust</label>
<input type="text" name="rust" />
</p>
<p id="waste" style="display:none;">
<label for="waste">Waste</label>
<input type="text" name="waste" />
</p>
<p><input id="submit" type="submit" value="Calculate"/></p>
</form>
</div>