3 Typeahead elements within a div with horizontal overflow

I have a container with the class 'table-responsive' that has overflow-x set to 'auto'.

Within this container, there is an input field with typeahead. When I receive results to populate the typeahead, they appear within the container. How can I move outside of it?

Here is my HTML code:

<div class="table-responsive">
    <fieldset>
        <legend>Rows</legend>
        <table id="detailDocument" class="table table-condensed table-fixed" cellspacing="0" width="100%">
        <col width="50px">
        <col width="350px">
            <thead>
                <tr>
                    <td></td>
                    <td><label class="align-table">Description</label></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="<?= $root; ?>/assets/img/details_close.png" class="link removeRow"></td>
                    <td>
                        <input name="txtDescription[]" data-target=".container-fluid" class="form-control selectDescription" data-provide="typeahead" autocomplete="off" name="txtDescription_0" type="text" placeholder="" value="">
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>

Below is my JavaScript code snippet:


$('.selectDescription').typeahead({
minLength: 3,
items: 5,
delay: 400,
source: function (query, response) {
$.ajax({
url: '<?= $root; ?>/get_list',
dataType: "json",
type: 'POST',
data: {
query: query
},
success: function (data) {
return response(data.list);
}
});
},
displayText: function (item) {
return item.text;
}
});

Here is the image: https://i.sstatic.net/gC1CR.jpg

UPDATE JSFiddle example

jqueryhtmlcsstypeaheadbootstrap-typeahead

Answer №1

  • An element positioned absolutely is located in relation to a parent element that has position relative, or the closest ancestor with a relative position. It will traverse up the DOM hierarchy until it finds a relative context for its positioning.
  • If no relative parent is found, it will then default to the outermost « container », which is typically the browser window, also known as the viewport (or maybe the document, or the window … but let's leave the W3C specifics aside).

All you need to do is set the position static on the relative element.

In your specific case:

.dataTables_wrapper {
    position: static;
    clear: both;
    zoom: 1;
}

See updated fiddle here

Source of information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

IE compatibility problem with the alignment of input group buttons and textboxes in Bootstrap v4

Encountering an issue with input group in IE while using bootstrap v4, working fine in Chrome. Specifically using IE 11 Here is my plunkr: input group bootstrap v4 Chrome display: https://i.sstatic.net/yXtEW.png IE display: https://i.sstatic.net/WiRz ...

csstwitter-bootstrapbootstrap-4

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

Today I'm encountering yet another AJAX-related error. I am in the process of developing a user registration system using AJAX and PHP, following MVC architecture. Previously, I successfully built a login system without AJAX that functions flawlessl ...

javascriptphpjqueryajaxmysqli

What is the best way to deliver HTML and JavaScript content using Node.js from virtual memory?

Situation I'm currently developing an in-browser HTML/JS editor, utilizing memory-fs (virtual memory) with Webpack and webpack-html-plugin to package the files created by users in the editor. Storing the files in virtual memory helps avoid I/O operat ...

javascripthtmlnode.jsexpress

Designing webpages by superimposing text onto images with customizable positioning

My current project involves developing an HTML document with a floor plan image as the main layer. On top of this image, I need to display employee names extracted from a database and positioned on the map based on a location variable within the database ...

javascripthtmlimage

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Here's an anchor tag with a tooltip: <a data-toggle="tooltip" data-original-title="Apologies, pronunciation audio is currently unavailable."> <span class="glyphicon glyphicon-volume-off pronounce"> </span> </a> When v ...

htmlcsstwitter-bootstrap

Transferring data from the Server-Side dataTable to a modal | Creating a personalized row button for dataTable

I have integrated a tutorial from datatables.net into my test page, which can be found at this link: . However, I am facing an issue where I am unable to pass selected data into a modal, and the modal does not open at all. EDIT: Here is the code snippet f ...

phphtmlajaxdatatablesqlsrv

Using CSS to create clickable areas on an image

Here is an example image: https://i.sstatic.net/EerkN.jpg This image shows a desk with various elements, and I am looking for a way to make parts of the image interactive. For example, clicking on the monitor would take you to a specific link, and click ...

htmlcsssvgimagemap

Customizing jquery-template based on specific field values during rendering

In a separate file named section.htm, I have the following template: <h3>${Name}</h3> {{each Variables}} {{tmpl($data) Type}} ${Type} | ${Name} | ${Value} <br/> {{/each}} I am trying to render different templates based on th ...

javascriptjqueryjquery-templates

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

I am having trouble with the dropdown button in my Bootstrap - it just won't seem

I've exhausted all YouTube tutorials and followed the entire Bootstrap documentation, but I still can't seem to get it to work. Please, someone, help me figure out why it's not functioning properly :( This is the basic HTML bootstrap code I ...

htmlangulardropdownbootstrap-5

Having trouble verifying the selection option in Angular 6

I've been trying to implement Select option validation in Angular 6, but neither Aria-required nor required seem to be effective. The requirement is for it to display a message or show a RED border similar to HTML forms. Here's the HTML snippet ...

htmlangulartypescriptangular6

Tips for uploading an image file from Django Admin to the HTML

If I have already used a for loop in my code, how should I write the image address if I don't want to use 'for'? Can I directly write something like '/img/1.jpg'? Here is the directory where my images are stored: https://i.sstatic ...

pythonhtmlcssdjango

Prevent Selection of Value in Dropdown List

Here is a dropdownlist I've created that has the following structure: Item1 Item2 Item3 Item4 Item5 Item6 Item7 I am wondering if it's possible to make Item1 and Item4 non-selectable using Jquery. LaterEdit: I woul ...

jquery

What are the steps to solving the issue of modal not being recognized as a function

I believe I have organized the .js files correctly: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></s ...

jquerylaravelbootstrap-4bootstrap-modal

Why do confirm or alert boxes in Safari on Windows require a double click?

I'm currently working on a simple JavaScript example where I want to display an alert box when an HTML button is clicked in SAFARI. However, I've noticed that it requires a double click to make the alert disappear from the screen. Does anyone ha ...

javascripthtml

Transforming an array of strings into a Name/Value object using JavaScript

Recently, I encountered a Web Service that sends an array of strings to the client. My goal is to transform this array into an object where each string has a name for future reference. Let's start with: var result = ["test", "hello", "goodbye"]; An ...

javascriptjquery

Adjust the width of a class using CSS transitions when hovering

Is there a way to use pure CSS to adjust the widths of classes on hover? Although the transition is successfully changing the classes, class .b and .c are not impacting the width of classes that come before them. Ideally, I would like the previous class ( ...

htmlcsscss-transitions

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Having issues with the functionality of jQuery's remove method?

I need help with removing specific li elements from my HTML code. Here is the snippet of HTML: This is the jQuery code I have been using: $("li").remove(":contains('undefined')"); Any assistance would be appreciated! ...

jquery

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview