3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box height decreases and becomes difficult to view. This issue is occurring in Chrome browser, while it works fine in Firefox.
Here is my code:
<label><input type="radio" name="reward-venue" value="Fly" checked /><div class="radio-icon Fly-sprite"></div></label>
<label><input type="radio" name="reward-venue" value="Drive" /><div class="radio-icon Drive-sprite"></div></label>
<label><input type="radio" name="reward-venue" value="Stay" /><div class="radio-icon Stay-sprite"></div></label>
<div>
Reward program
<select name="program">
<option value=""> - select one - </option>
{{#fly_programs}}
<optgroup label="Fly">
{{#reward_program}}
<option value="{{reward_program_id}}">{{name}}</option>
{{/reward_program}}
</optgroup>
{{/fly_programs}}
{{#drive_programs}}
<optgroup label="Drive">
{{#reward_program}}
<option value="{{reward_program_id}}">{{name}}</option>
{{/reward_program}}
</optgroup>
{{/drive_programs}}
{{#stay_programs}}
<optgroup label="Stay">
{{#reward_program}}
<option value="{{reward_program_id}}">{{name}}</option>
{{/reward_program}}
</optgroup>
{{/stay_programs}}
</select>
</div>
Javascript for hiding and showing elements:
var show_optgroup = $('optgroup[label=' + venue_name + ']')
, hide_optgroup = $('optgroup[label!=' + venue_name + ']')
;
show_optgroup.show();
show_optgroup.children('option').show();
hide_optgroup.hide();
hide_optgroup.children('option').hide();
this.$el.find('option:selected').removeAttr('selected');
this.$el.find('option:first').attr('selected', 'true');
$.uniform.update();
return this;