0

I have a modal with some radio buttons. There are 6 total. However, based on certain conditions, not all the radio buttons are supposed to show. I am using .hide() to hide the radio buttons that should not show when a certain condition is met. When the radio button is hidden, then the element shows in DevTools that it has a style of "display: none" on it. The problem is that the missing radio button still leaves a gap in the document flow, i.e. a gap in the modal. I thought display: none meant that an item was not only hidden but was removed from the document flow.

Here is my code. I had to change all the names and such because it is an issue at work.

HTML

<div class="container">
  <div id="radioButtons">
  </div>
</div>

JavaScript (jQuery)

radioButtonsHTML = $(
  '<input name="mainList" type="radio" id="startPacket" value="STRTPCKT" /> <label 
id="startPacketLabelId" for="startPacket" style="padding-left:8px;">Start Packet<span id="startPacketIncludedLabelId" style="font-weight:normal"> (Request Includes All Items)</span></label><br>' +
'<input name="mainList" type="radio" id="confScheduleRadio" value="CONF_SCHEDULE" /> <label id="confSheduleRadioLabelId" for="confSheduleRadio" style="padding-left:8px;">Conference Schedule</label><br>' +
'<input name="mainList" type="radio" id="rulesRadio" value="RULES" /> <label id="rulesRadioLabelId" for="rulesRadio" style="padding-left:8px;">Rules<span id="rulesIncludedLabelId" style="font-weight:normal"> (Request Includes All Terms and Conditions)</span></label><br>' +
'<input name="mainList" type="radio" id="secondStartPacket" value="..." /> <label id="secondStartPacketLabelId" for="secondStartPacket" style="padding-left:8px;">Second Start Packet<span id="secondStartPacketIncludedLabelId" style="font-weight:normal"> (Request Includes All Items)</span></label><br>' +
'<input name="mainList" type="radio" id="secondConfScheduleRadio" value="..." /> <label id="secondConfScheduleLabelId" for="secondConfScheduleRadio" style="padding-left:8px;">Second Conference Schedule</label><br>' +
'<input name="mainList" type="radio" id="secondRulesRadio" value="..." /> <label id="secondRulesRadioLabelId" for="secondRulesRadio" style="padding-left:8px;">Second Set of Rules<span id="secondRulesIncludedLabelId" style="font-weight:normal"> (Request Includes All Terms and Conditions)</span></label>' +
"<br/> <br/>"
);

radioButtonsHTML.appendTo("#radioButtons");

$("input[id*=startPacket]:radio").hide();
$("[id*=startPacketLabelId]").hide();
$("input[id*=secondStartPacket]:radio").hide();
$("[id*=secondStartPacketLabelId]").hide();

The code may be found on my Codepen here.

For brevity's sake for this question, rather than include all the conditions and the various ways different elements get hidden, I just set two buttons and labels to hide without a condition. It gets the point across.

If I hid the last four lines of the code I posted (all the .hide() statements), the modal looks like this: enter image description here

However, if I leave the .hide() statements in place, the modal looks like this: enter image description here

Is there any way to get rid of the gaps when certain buttons are hidden? I assume they have to be taken out of the document flow, but how can I do that in this situation?

Thanks!

5
  • Have you tried fadeOut() and fadeIn()
    – Donzaala
    Oct 13, 2021 at 19:41
  • That doesn't work either.
    – apex2022
    Oct 13, 2021 at 19:59
  • Upon thorough lookup of your code, your problem is with where you place <br> tag which falls outside your target for hiding the inputs
    – Donzaala
    Oct 13, 2021 at 21:22
  • I tried moving the <br> tag just inside the closing </label> tag. It worked on the codepen, but in the code for work it just made all of the items side by side.
    – apex2022
    Oct 14, 2021 at 13:42
  • I ended up removing the <br> tags and putting each line with the <input> and <label> in a <span> set to display: block. That got rid of the gap.
    – apex2022
    Oct 14, 2021 at 13:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.