3

我对 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;
}
4

1 回答 1

4

添加css属性“溢出:滚动;” 到 html 正文固定下拉列表的位置,并且页面不会滚动

于 2013-06-26T21:27:33.983 回答