0
147
ViewsHiddeln section not displaying correctly
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 class="col-md-11 !important">
<div class="form-group">
<label class="control-label source-label">Other</label>
<input class="form-control" id="enteredOtherSource" name="enteredOtherSource[0].Other" type="text" value="">
<span class="field-validation-valid text-danger" 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>
·
Juan Pablo Isaza
1 answers
Answer question0
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 class="none">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 class="hidden">2 - display will be none</div>
<div>3 - normal div </div>
</div>
·
Juan Pablo Isaza
Report
Answer question