My challenge involves applying CSS to hidden elements and revealing them when a user interacts with a radio button. The issue arises when using CSS through jQuery to dynamically set the width of these elements. Because the elements are initially set to display: none;, the jQuery function is unable to grab the width of the parent div upon page load. As a result, the width is incorrectly calculated as 0px, causing the layout to be distorted.
How can I resolve this issue?
Unfortunately, my access to JFiddle has been filtered and blocked by the WiFi, so I cannot provide a live example. However, here is a snippet of my HTML markup:
<fieldset id="new_item">
<legend>New Item</legend>
<div class="input-row">
<div class="input-wrap setwidth(1/2)">
@Html.LabelFor(model => model.ProductDescription, T("Product Description (maximum of 30 characters"))
@Html.TextBoxFor(model => model.ProductDescription, new { @class = "setwidth(1)", @maxlength = "30" })
</div>
<div class="input-wrap setwidth(1/2)">
@Html.LabelFor(model => model.ProductClass, T("Product Class"))
@Html.DropDownListFor(model => model.ProductClass, new System.Web.Mvc.SelectList(Model.ProductClasses, "Value", "Key"), new { @class = "setwidth(1)" })
</div>
</div>
Here is a snippet of my jQuery and CSS:
<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#new_item').addClass('hide');
$('#existing_item').addClass('hide');
$('#StateOfItem').change(function () {
//every time value of StateOfItem is changed
if ($('.new_item').is(':checked')) {
$('#new_item').removeClass('hide');
$('#existing_item').addClass('hide');
}
else if ($('.existing_item').is(':checked')) {
$('#new_item').addClass('hide');
$('#existing_item').removeClass('hide');
}
});
});
</script>