我在使 jqueryUI 自动完成适应我网站的 CSS 布局时遇到一些困难。
每当我在输入字段上调用自动完成功能时,列表都会按预期打开。由于输入位于固定高度的 div 内,因此当用户滚动该 div 时,自动完成列表保持固定。
有没有人遇到过这种情况并知道解决方法?当父 div 的高度不固定时,不会出现此问题。
我在这里做了一个 jsfiddle 模型:http://jsfiddle.net/NSm7f/1/ http://jsfiddle.net/NSm7f/1/
这是我的示例代码:
<div class="root">
<div id="Header">
<div class='heading'>Test</div>
</div>
<div class='box' id="Wrapper">
<div class='box' id="Leftpanel">
<p>some text</p>
<h1>Other stuff</h1>
<br>
<br>Autocomplete box:
<input id="box1">
<p>some text</p>
<h1>Other stuff</h1>
<br>
<br>Another autocomplete:
<input id="box2">
<p>some text</p>
<h1>Other stuff</h1>
<br>
<br>
<p>some text</p>
<h1>Other stuff</h1>
<br>
<br>
<p>some text</p>
<h1>Other stuff</h1>
<br>
<br>
</div>
<!--Leftpanel-->
<div class='box' id="Rightpanel">
<form>
<textarea rows="33" cols="45"></textarea>
<br>
</form>
</div>
<!--End rightpanel-->
</div>
<!--wrapper-->
</div>
<!--root-->
我的 JS(是的,我加载了 jqueryUI 和默认的 jqueryUI css):
$("#box1").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
});
$("input#box2").autocomplete({
source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
});
和我的CSS:
.box {
float: left;
}
#root {
max-width: 1200px;
margin: 0 auto;
}
#Wrapper {
width: 100%;
display: table;
}
#Leftpanel, #Rightpanel {
vertical-align: top;
}
#Leftpanel {
width: 57%;
display: table-cell;
height:750px;
color: #B29D72;
overflow:scroll;
background-color: #272F44;
-moz-border-radius: 2px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Rightpanel {
width: 37%;
display: table-cell;
height: 750px;
color: #B2A283;
background-color: #0D162C;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 1%;
margin:0.5%
}
#Sidebar {
width: 15%;
background-color: #B2A283;
color: #0D162C;
padding:1%;
margin:0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Sidebar a:link {
color: #FFF4CB;
}
#Footer {
width: 97%;
height: auto;
background-color: #B2A283;
color: #0D162C;
padding: 1%;
margin: 0.5%;
-moz-border-radius: 2px;
border-radius: 5px;
}
#Footer a:link {
color: #FFF4CB;
padding-left: 5px;
padding-right: 5px;
}
#Footer A:hover {
color: #CA9221;
}
#Sidebar .slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}