У меня есть этот скрытый раздел с display:none
. Div с элементом управления TextBox
использует col-md-11
, но при переключении дисплея этот раздел выглядит так, как будто он занимает только col-md-5
. Могу ли я что-нибудь сделать, чтобы убедиться, что это использует правильное пространство?
<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>
display: none
полностью удаляет элемент из коллекции элементов. Используйте visibility: hidden
, если хотите, чтобы место было зарезервировано.
Это единственный способ зарезервировать место?
display: none
заставляет страницу отображаться так, как будто элемент не существует, поэтому место, которое он занимал бы, заполняется следующим элементом.
Для резервирования места можно использовать visibility: hidden
.
В приведенном ниже рабочем фрагменте показаны наборы из трех элементов div, средний из которых либо удален с помощью display:none
, либо скрыт с помощью 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>
поэтому в js я бы сделал что-то вроде $("[id='sourceSection_" + section + "']").style.visibility = 'visible';
Чтобы установить его с помощью javascript, вы должны сделать ссылку на объект элемента (например, document.getElementById("myHiddenDiv")
и установить его свойство стиля, как в вашем комментарии: .style.visibility = 'visible'
. Получить элемент по идентификатору просто, но есть и другие методы, такие как getElementByClassName()
и document.querySelectorAll()
. Если вы используйте их, имейте в виду, что они возвращают html-коллекцию всех совпадающих элементов, и вы должны определить соответствующий элемент с порядковым номером [0] для первого совпадения, как если бы список был массивом.
Я пропустил множественное число (s) во втором упоминании, оно должно было быть getElementsByClassName()
Пожалуйста, покажите простой HTML-код, а не серверный код. См. Как спросить. Также отметьте свою версию Bootstrap.