Jquery .hide() does not totally remove the spaces

Question

function CondtionalCheck(BaseControlID, ChildControlID, Condition) {

    if ($("#" + BaseControlID).is(':checked')) {
        $("#div" + ChildControlID).show();
    } else {
        $("#div" + ChildControlID).hide();
        $("#" + ChildControlID).val("");
    }
}

Above is my hide() and show() function. After the element is hide, it does remove the spaces, but it does not really removing all the spaces.

What causes this to happen?

please look at this:- https://stackoverflow.com/questions/8627250/jquery-hide-does-not-remove-the-space-of-the-object....https://stackoverflow.com/questions/38050880/hiding-elements-using-jquery-taking-up-space-on-page — Parth Raval, Apr 10 '18 at 05:39
as zer00ne said please add your HTML also because with only jquery we can't help you out — Nidhi, Apr 10 '18 at 05:49

score 1 · Accepted Answer · answered Apr 10 '18 at 06:48

1

Methods show() and hide() set the visibility of an element. If you want to completely hide the DOM element, then it's better to use the method css(). Your code will look like this:

function CondtionalCheck(BaseControlID, ChildControlID, Condition) {
  if ($("#" + BaseControlID).is(':checked')) {
      $("#div" + ChildControlID).css('display', 'block');
  } else {
      $("#div" + ChildControlID).css('display', 'none');
      $("#" + ChildControlID).val("");
  }
}

answered Apr 10 '18 at 06:48

Troyan Victor

138
8

I have tried this as well...but still not working... it got help to reduce the spaces, but there is spaces...it does really remove all the spaces – ellie Apr 10 '18 at 14:26
@ellie Means these spaces refer not to the element that you want to hide, but to the neighboring ones. If you show the html and css code, then it can be possible to understand – Troyan Victor Apr 10 '18 at 14:34
Was it like that in older versions of JQuery? Because now [hide()](https://api.jquery.com/hide/) is roughly equivalent to calling `.css( "display", "none" )`, except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. – edvard_munch Jul 22 '19 at 16:55

score 0 · Answer 2 · answered Apr 10 '18 at 05:37

The hide() function will set the style of a DOM element as visibility: hidden. It's equivalent to saying myElement.style.visibility = 'hidden'; in regular, non jQuery javascript.

But a hidden element is still incorporated into the "flow" (or layout) of a page, as you are clearly seeing. What you need to set is the display CSS property. I'm not sure what the jQuery function would be, but in regular javascript it's myElement.style.display = 'none';. This will actually remove your element from the "flow" (or layout) of the webpage.

Jquery .hide() does not totally remove the spaces

2 Answers2