当下拉列表不适合重新定位容器高度时,选择2错误定位

时间:2013-06-21 15:45:18

标签: jquery-select2

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

1 个答案:

答案 0 :(得分:4)

添加css属性“overflow:scroll;”到html正文修复了下拉列表的位置,页面没有滚动