我对 select2 插件有这个问题,它的下拉位置与选择不对齐。(可惜我发不了图片,没有声望点,我就发挥我的想象力吧:)
它的外观:
|--------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;
}