我在div
元素中包含以下代码:
<div>
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%;" doLayout=”false”>
<div data-dojo-type="dijit/layout/ContentPane" title="Basic" data-dojo-props="selected:true" style="display: block">
<div class="layer-selects">
<div class="layer-selects row">
<span class="layer-selects first-col">
<label for="selectService">${nls.service}:</label>
</span>
<span class="layer-selects second-col">
<select id="selectService"
name="selectService"
data-dojo-type="dijit/form/Select"
data-dojo-attach-point="selectService"
data-dojo-attach-event="onChange:onSelectServiceChange">
</select>
</span>
</div>
<div class="layer-selects row">
<span class="layer-selects first-col">
<label for="selectLayer">${nls.layer}:</label>
</span>
<span class="layer-selects second-col">
<select id="selectLayer"
name="selectLayer"
data-dojo-type="dijit/form/Select"
data-dojo-attach-point="selectLayer"
data-dojo-attach-event="onChange:onSelectLayerChange">
</select>
</span>
</div>
</div>
<div>
<span class="layer-selects first-col">
<label for="searchTerm">${nls.searchTerm}: </label>
</span>
<span>
<input id="searchTerm" type="text"
data-dojo-attach-point="searchTermInput"
data-dojo-type="dijit/form/TextBox"
name="searchTerm"
required="true"/>
</span>
<span class="layer-selects second-col">
<select id="selectField"
name="selectField"
data-dojo-type="dijit/form/Select"
data-dojo-attach-point="selectField">
</select>
</span>
</div>
</div>
</div>
<div>
<button data-dojo-type="dijit/form/Button" type="button">${nls.searchButton}</button>
</div>
</div>
我无法在button
下显示TabContainer
。它位于父TabContainer
顶部的div
组件后面。
如何将button
和任何其他元素放在TabContainer
下? TabContainer
高度需要是动态的。我尝试将display: block
样式应用于容器以及ContentPane
,但这没有任何区别。如果我将height
的{{1}}设置为大于TabContainer
的值,则按钮会被推到底部。