All geek questions in one place

How to fix the position of the absolute overflow element relative to the relative parent?

I created a custom checkbox that is enclosed in a scrollable div.

My problem: the dropdown takes up wrapper space. That is, it looks like this:

enter image description here

But I want this to be fixed relative to the parent shell, for example:

enter image description here

I can achieve this result by removing position:relative;from .select_box. However, it breaks up the interval between the input field and the list (which I don't need) as follows:

enter image description here

Here is my code -

HTML:

<div id="wrapper">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    <br/><br/>
    <div class="select_box">
        <input type="text" onMouseDown="show_list(this)" onblur="hide_list(this)" readonly/>
        <ul style="width:200px;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
    </div><br/><br/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

JQuery

function show_list(element) {
    $(element).next().toggle();
    if ($(element).next().css('display') == 'none') $(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
    else $(element).css('background', 'url(select_box_arrow_inverted.png) no-repeat 95%');
}

function hide_list(element) {
    $(element).next().hide();
    $(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
}
$(document).ready(function () {
    $("div[class='select_box'] input:text").css("padding", "0 10px");
    $("div[class='select_box'] li").mousedown(function () {
        $(this).parent().prev().attr('value', $(this).text());
    });
});

CSS

#wrapper {
    height:200px;
    width:400px;
    border:Solid 1px;
    overflow:auto;
}
/* CSS for customized select box */
 .select_box {
    display:inline-block;
    //position:relative;
}
.select_box input[type="text"] {
    width:200px;
    height:25px;
    border: 1px solid #cccccc;
    border-radius:2px;
    background:url(select_box_arrow.png) no-repeat 95%;
    font-size:15px;
    outline:none;
    cursor:pointer;
    vertical-align:middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.select_box input[type="text"]:focus {
    border-color:#FFC59D;
    box-shadow:0 0 10px #FFC59D;
}
.select_box ul {
    list-style:none;
    padding:0;
    margin:0;
    margin-top:2px;
    font-family:Tahoma, Geneva, sans-serif;
    line-height:25px;
    font-size:15px;
    font-weight:normal;
    border:solid 1px #FFC59D;
    width:220px;
    max-height:250px;
    overflow:auto;
    display:none;
    position:absolute;
    background:#fff;
    color:#000000;
    scrollbar-arrow-color: #ff6600;
    scrollbar-track-color: #FFC59D;
    scrollbar-face-color: #ff6600;
    scrollbar-shadow-color: #ff6600;
}
.select_box li {
    padding-left:10px;
}
.select_box li:hover {
    background:#FF9D5B;
    color:#fff;
    cursor:default;
}
.select_box ::-webkit-scrollbar {
    width: 12px;
    border:solid 1px #FFC59D;
    border-left-width:2px;
}
.select_box ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#FFC59D;
}
.select_box ::-webkit-scrollbar-thumb:window-inactive {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#FFC59D;
}

Working script.

Is there a simple CSS solution? I am also open to solutions through jQuery.

+4
2

- select. , , - .

Fiddle ( , , , )

HTML

<ul class="list-box" style="width:200px;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ul>
<div id="wrapper">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    <br/><br/>
    <select><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option></select>
    <div class="select_box">
        <input class="list_input" type="text" onMouseDown="show_list(this)" onblur="hide_list(this)" readonly/>
    </div><br/><br/>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

Javascript

function show_list(element) {
    var pos = $(element).offset();
    var input_height = $(element).height();
    $('.list-box').css('top', pos.top + input_height);
    $('.list-box').css('left', pos.left);
    $('.list-box').toggle();
    if ($('.list-box').css('display') == 'none') $(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
    else $(element).css('background', 'url(select_box_arrow_inverted.png) no-repeat 95%');
}

function hide_list(element) {
    $(element).next().hide();
    $(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
}
$(document).ready(function () {
    $("div[class='select_box'] input:text").css("padding", "0 10px");
    $("ul.list-box li").mousedown(function () {
        $('.list_input').attr('value', $(this).text());
        $('.list-box').toggle();
    });

    $('#wrapper').on('scroll', function(){
        var pos = $('.list_input').offset();
        var input_height = $('.list_input').height();
        $('.list-box').css('top', pos.top + input_height);
        $('.list-box').css('left', pos.left);
    });
});

CSS

#wrapper {
    height:200px;
    width:400px;
    border:Solid 1px;
    overflow:auto;
}
/* CSS for customized select box */
 .select_box {
    display:inline-block;
    position:relative;
}
.select_box input[type="text"] {
    width:200px;
    height:25px;
    border: 1px solid #cccccc;
    border-radius:2px;
    background:url(select_box_arrow.png) no-repeat 95%;
    font-size:15px;
    outline:none;
    cursor:pointer;
    vertical-align:middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.select_box input[type="text"]:focus {
    border-color:#FFC59D;
    box-shadow:0 0 10px #FFC59D;
}
.select_box ul {
    list-style:none;
    padding:0;
    margin:0;
    margin-top:2px;
    font-family:Tahoma, Geneva, sans-serif;
    line-height:25px;
    font-size:15px;
    font-weight:normal;
    border:solid 1px #FFC59D;
    width:220px;
    max-height:250px;
    overflow:auto;
    display:none;
    position:absolute;
    background:#fff;
    color:#000000;
    scrollbar-arrow-color: #ff6600;
    scrollbar-track-color: #FFC59D;
    scrollbar-face-color: #ff6600;
    scrollbar-shadow-color: #ff6600;
}
.select_box li {
    padding-left:10px;
}
.select_box li:hover {
    background:#FF9D5B;
    color:#fff;
    cursor:default;
}
.select_box ::-webkit-scrollbar {
    width: 12px;
    border:solid 1px #FFC59D;
    border-left-width:2px;
}
.select_box ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#FFC59D;
}
.select_box ::-webkit-scrollbar-thumb:window-inactive {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#FFC59D;
}

:

@charlietfl, , . , jquery , . div #wrapper, .

+1

?

scroll through the demo

#wrapper, input[type=text] javaScript position: absolute

: http://jsfiddle.net/4rv4s3ce/10/

, .

+1

Source: https://habr.com/ru/post/1608717/

More articles:


All Articles