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

What is the best way to showcase a photo selected using an HTML input within a div container?

Watching a live video stream in real-time using WebRTC with React

Implementing JavaScript if statements that evaluate to true without cycling through all my if statements

Testing React Component State Updates

Incorporating a background image into a card component using props

Line up with miniature stature

Error: The componentwillmount function has encountered an issue. Actions must be in the form of plain objects. For asynchronous actions, consider

What is the best way in jQuery to pass an event to a parent anchor if necessary?

What to do when encountering the error "Uncaught (in promise) SyntaxError: Unexpected end of JSON input"?

I am experiencing difficulties with my custom font not functioning properly

"Encountered a roadblock while attempting to utilize the applyMatrix

Making a Cross-Origin Resource Sharing (CORS) request with jQuery utilizing the $

What is the reasoning behind utilizing the "&" selector in CSS?

Choose the radio button by clicking using jQuery

image source that changes dynamically with a placeholder image

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

"Troubleshooting the issue of Angular JS ng-click HTML being assigned via InnerHTML but not properly invoking

Is there a specific method or function that can effectively translate special characters such as into their corresponding representations?

Discover the secret to loading multiple Google charts simultaneously, despite the limitation that Google charts typically only allow one package to load at a time