我对selec2插件有这个问题,其中下拉位置与select不对齐。 (太糟糕了,我不能发布图片,没有声望点,我会用我的想象力:)
它的样子:
|--------Dropdown------|
|-------Select--------|
它的外观:
|--------Dropdown-----|
|-------Select--------|
(它的下拉菜单是因为在页面的下边缘选择了它)
我已经读过有关jquery有问题来计算具有css转换的元素的偏移量,并尝试了每个解决方法并尝试对我的代码中的每个转换单词进行注释...没有结果。
我发现当我给我的html身体足够高度以使其滚动(我不想那样)时,问题就解决了。你们有什么想法吗? (见下面的代码):
HTML:
<div style="margin-left:50px;width:250px; float: left;">
<select name="marca" id="marca" data-placeholder="Marca"
class="select2" tabindex="15">
<option value=""></option>
<option class="response" value="ALCATEL" text="Alcatel">Alcatel</option>
<option class="response" value="APPLE" text="Apple">Apple</option>
<option class="response" value="AVVIO" text="Avvio Full">Avvio
Full</option>
<option class="response" value="ENSPIRE" text="Cellon Enspire">Cellon
Enspire</option>
<option class="response" value="ERIC" text="Ericsson">Ericsson</option>
<option class="response" value="HTC" text="High Tech Computer ">High
Tech Computer</option>
<option class="response" value="HUAWEI" text="Huawei">Huawei</option>
<option class="response" value="IMAC" text="Imac">Imac</option>
<option class="response" value="LG" text="Lg">Lg</option>
<option class="response" value="M4TEL" text="M4tel">M4tel</option>
<option class="response" value="MOTO" text="Motorola">Motorola</option>
<option class="response" value="NOKI" text="Nokia">Nokia</option>
<option class="response" value="PALM" text="Palmone Modelo">Palmone
Modelo</option>
<option class="response" value="PACO" text="Pantech Co., Ltd">Pantech
Co., Ltd</option>
<option class="response" value="PCD"
text="Personal Communication Device">Personal
Communication Device</option>
<option class="response" value="SAGEM" text="Sagem">Sagem</option>
<option class="response" value="SAMS" text="Samsung">Samsung</option>
<option class="response" value="SWT"
text="Servicell Wireless Technologie">Servicell Wireless
Technologie</option>
<option class="response" value="SIWI" text="Sierra Wireless">Sierra
Wireless</option>
<option class="response" value="SKTE" text="Sk Teletec Co.,ltd">Sk
Teletec Co.,ltd</option>
<option class="response" value="TELU" text="Telular">Telular</option>
<option class="response" value="VERYKOOL" text="Verykool">Verykool</option>
<option class="response" value="VKMOB" text="Vk Mobile">Vk
Mobile</option>
<option class="response" value="ZONDA" text="Zonda">Zonda</option>
<option class="response" value="ZTE" text="Zte Corporation">Zte
Corporation</option>
</select>
</div>
选择CSS:
#disponibilidadForm select {
width: 245px;
}
#modelo,#marca {
overflow: hidden;
}
.select2-offscreen,.select2-offscreen:focus {
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
outline: 0;
left: 0px;
}
user agent stylesheetkeygen,select,select[size="0"],select[size="1"] {
border-radius: 0px;
}
user agent stylesheetselect {
-webkit-appearance: menulist;
box-sizing: border-box;
-webkit-align-items: center;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
user agent stylesheetkeygen,select {
border-radius: 5px;
}
user agent stylesheetinput,textarea,keygen,select,button,isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput,textarea,keygen,select,button,isindex,meter,progress
{
-webkit-writing-mode: horizontal-tb;
}
Inherited from div.float_left
.float_left {
text-align: left;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from form#disponibilidadForm
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div.formulario.float_right
.float_right {
text-align: left;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div.contenido
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from body
body {
line-height: 1;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from html
html {
font-family: Arial, Helvetica, sans-serif;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
答案 0 :(得分:4)
添加css属性“overflow:scroll;”到html正文修复了下拉列表的位置,页面没有滚动