Hiddeln section not displaying correctly-CodePudding

I have this hidden section with the display:none. The div with the TextBox control is using col-md-11 but when switch the display this section looks like it is only taking up about col-md-5. Is there anything I can do to make sure this is using the correct space?

<div >
     <div >
     <label >Other</label>
     <input  id="enteredOtherSource" name="enteredOtherSource[0].Other" type="text" value="">
     <span  data-valmsg-for="enteredOtherSource[0].Other" data-valmsg-replace="true"></span>
     </div>
     <input value="91" data-val="true" data-val-number="The field SourceId must be a number." data-val-required="The SourceId field is required." id="otherSourceId" name="enteredOtherSource[0].SourceId" type="hidden">
</div>

CodePudding user response：

display: none causes the page to be rendered as if the element does not exist, so the space it would have occupied is filled with the next element.

To reserve space visibility: hidden can be used.

The working snippet below shows sets of three divs where the middle one is either removed with display:none or hiddent with visibility:hidden

div {
  width: 100%;
  border: 1px solid black;
  background: yellow;
  padding: 3px;
}

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

.container {
  width: 60%;
  padding: 15px;
  background: red;
  border: 1px solid black;
}

<div class='container'>
  Three normal divs, the middle one will have a style applied to hide or make it invisible in the lower panels
  <div>1 - normal div </div>
  <div>2 - none or visibility hidden below</div>
  <div>3 - normal div </div>
</div>
<p> </p>
<div class='container'>
  When using `display:none` the div and its space disappear:
  <div>1 - normal div </div>
  <div >2 - display will be none</div>
  <div>3 - normal div </div>
</div>
<p> </p>
<div class='container'>
  when using `visibility: hidden` the div disappears but its space is reserved:
  <div>1 - normal div </div>
  <div >2 - display will be none</div>
  <div>3 - normal div </div>
</div>