The drop-down does not move above the subsequent div when focused

Question

The drop-down does not move above the subsequent div when focused

I have implemented a dropdown feature on focus of an <input type='text'> box in the following manner

The issue I am facing is with the positioning of the dropdown box. It currently displaces the content of the container-box below it. Is there a way to make this text box act like a select tag without actually using the select tag?

My CSS for the dropdown div includes:

display:none;z-index:200;

To show the dropdown on focus, I use the following jQuery code:

$('#text-box').focus(function(){
    $('.dropdown').show();
});

Additionally, I want the dropdown to disappear when the focus is removed from the search box.

In summary, I have two questions:

About fixing the position of the dropdown
Enabling toggling of the dropdown visibility on and off focus of the search box

Thank you!

javascript jquery html css

Answer 1

Answer №1

To create a dropdown, you can utilize the CSS property position:absolute;. Additionally, implement the Jquery event blur on the text field to hide it.

Check out the JS FIDDLE DEMO here

JS

$(document).ready(function(){
    $('#text-box').focus(function(){
        $('.dropdown').show();
    });

    $('#text-box').blur(function(){
        $('.dropdown').hide();
    });
});

CSS

.container-box {
    height:300px;
    width:300px;
    background: #eee;
}

.dropdown{
    display:none;
    position:absolute;
    z-index:100;
}

.dropdown ul {
    padding :0;
    background : #aaffdd;
}

The styling of the drop-down is left to your creativity! Customize it as you see fit :)

Answer 2

To create a dropdown, you can utilize the CSS property position:absolute;. Additionally, implement the Jquery event blur on the text field to hide it.

Check out the JS FIDDLE DEMO here

JS

$(document).ready(function(){
    $('#text-box').focus(function(){
        $('.dropdown').show();
    });

    $('#text-box').blur(function(){
        $('.dropdown').hide();
    });
});

CSS

.container-box {
    height:300px;
    width:300px;
    background: #eee;
}

.dropdown{
    display:none;
    position:absolute;
    z-index:100;
}

.dropdown ul {
    padding :0;
    background : #aaffdd;
}

The styling of the drop-down is left to your creativity! Customize it as you see fit :)

Answer 3

Answer №2

To prevent the dropdown from affecting other elements, you can utilize position: absolute; in CSS.

If you want to handle what happens when there is no focus, you can use the jQuery method .blur().

Check out this demo on JSFiddle: http://jsfiddle.net/7ffdF/12/

CSS:

.dropdown {
    display: none;
    z-index: 200;
    position: absolute;
    background-color: #eee;
    width: 400px;
}

jQuery code:

$('#text-box').blur(function() {
    $('.dropdown').hide();
});

Answer 4

To prevent the dropdown from affecting other elements, you can utilize position: absolute; in CSS.

If you want to handle what happens when there is no focus, you can use the jQuery method .blur().

Check out this demo on JSFiddle: http://jsfiddle.net/7ffdF/12/

CSS:

.dropdown {
    display: none;
    z-index: 200;
    position: absolute;
    background-color: #eee;
    width: 400px;
}

jQuery code:

$('#text-box').blur(function() {
    $('.dropdown').hide();
});

Answer 5

Answer №3

To position the div absolutely, you can follow this CSS code:

div.dropdown{
    width:170px;
    border:1px solid #ccc;
    position:absolute;
    background-color:#fff;
}

For a visual demonstration, check out this JS Fiddle link

Answer 6

To position the div absolutely, you can follow this CSS code:

div.dropdown{
    width:170px;
    border:1px solid #ccc;
    position:absolute;
    background-color:#fff;
}

For a visual demonstration, check out this JS Fiddle link

The drop-down does not move above the subsequent div when focused

Answer №1

Answer №2

Answer №3

Similar questions

When attempting to incorporate Jasmine into my current AngularJS/Bootstrap project, I encountered the error message stating

I am looking to create a split div with a diagonal line running through

Accessing information from Firebase and displaying it within an Angular Controller

Navigating to Protected Mobile Platform

AngularJS: Issue with watching arrays and deep $watch functionality

The HTML grid is causing an irritating excess space on the right side of my website

Tips for sending custom props to a dynamic page in Next.js

Error: Reactjs - Attempting to access the 'name' property of an undefined variable

Retrieving Data from a JSON Object Using a Specific Key

Node.js is throwing an error "Unexpected token v in JSON at position 0" which

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Sharing information between pages in React through Router

updating the HTML DOM elements using JavaScript is not yielding any response

The full background width is not being displayed as 100% on the

Incorporate a new style into several previous slides using the Slick carousel feature

Leveraging jQuery to send data to MySQL with the click of a button

Using jQuery Datepicker Beforeshowday to dynamically retrieve an array of unavailable dates through Ajax

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

Adjust the ZIndex on a div through interactive clicking

Interactive Infographics in HTML5 format