Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below).

In my attempts to achieve this, I utilized an absolutely positioned table beneath the input element. I applied vertical-align: middle; to the td elements and text-align: right; exclusively to the second td element. Everything appeared fine until I set a min-width for the table to match the input's width. This caused extra space on the right of the second td. I experimented with floating and absolute positioning for the second td, but encountered issues such as loss of vertical-align: middle; functionality and overlapping td elements.

Seeking a solution that mirrors Chrome's look and functionality without resorting to JavaScript-based dynamic styling or hard-coding specific dimensions for elements to maintain flexibility in styling options.

htmlcss

Answer №1

@Chris, I am not able to replicate the issue you are experiencing. The min-width property will expand both the table and its rows/columns accordingly.

div {
  background-color: red;
}

table {
  min-width: 300px;
  background-color: green;
}

td {
  vertical-align: middle;
}

td ~ td {
  background-color: white;
  text-align: right;
}
<div>
  <table>
    <tr>
      <td>first Col 1</td>
      <td>Second Col 1</td>
    </tr>
    <tr>
      <td>first Col 2</td>
      <td>Second Col 2</td>
    </tr>
  </table>
</div>

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

Enhance Your Wordpress Site with jQuery TimeEntry Plugin

I am currently working on integrating a Time range field into my Wordpress page. Can someone please guide me on where to insert the code and how to display the range text box on my page? $('.timeRange').timeEntry({beforeShow: customRange}); f ...

phpjqueryhtmlwordpress

Include token in src tag requests Angular version 8

In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...

javascripthtmlangularasp.net-core

Text area with a set height and expandable max-height - scrollable overflow

http://codepen.io/africanmatt/pen/IcGpa .text { max-height: 0; overflow-y: auto; transition: all .45s ease-in-out; } .text-active { max-height: 50%; } I am looking for a way to resize the .text component's max-height so that it adjusts prop ...

jquerycssheightflexbox

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

mobile-responsive vertical alignment using Bootstrap

Here is a jsbin that demonstrates the issue and here is the markup: <div class="row"> <div class="col-sm-4 xs-12"> <strong>UK Postcode</strong> </div> <div class="col-sm-4 xs-12"> <strong>Other Fie ...

csstwitter-bootstraptwitter-bootstrap-3

Can you provide instructions on creating a small border at the center of an h1 heading?

What is the best way to create a small border in the center of an h1 text element? ...

htmlcss

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

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

javascripthtmlangularstringdom

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Is there a way to change certain attributes of a shape onscreen when a specific key is pressed by the user? For example, can I make it so that pressing "a" changes the color of the shape? I attempted to modify a mouse rollover event to work with the desir ...

javascripthtmlcss

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

javascriptjqueryhtmlcss

Tips on creating type definitions for CSS modules in Parcel?

As someone who is brand new to Parcel, I have a question that may seem naive. In my project, I am using typescript, react, less, and parcel. I am encountering an error with typescript stating 'Cannot find module 'xxx' or its corresponding t ...

javascriptcsstypescriptcss-modulesparcel

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

javascriptjquerycss

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

htmlcssanimation3d

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation

In Firefox 50.0, the button's resizing feature causes the parent div container outline to adjust size

I am currently working on developing a responsive design with the feature of having a button that appears to "float" under a div element. My desired outcome is achieved in Opera and Chrome: In Firefox, the result is not as expected: You can access my co ...

htmlcssfirefoxflexboxoutline

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

javascriptphpjqueryhtmlajax

Adjust the size of an image to fit within a set height row using CSS grid

I have a container with fixed width and height where I want to display an image and some text. My goal is to have the text appear first, followed by the image filling up the remaining space in the container. Check out the image below for reference: Exampl ...

cssimagegrid

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

Retrieving the input value from embedded cells in a specific row of a table

I need the function to calculate the result of the following expression using values from the table below: a+b*c-(e/f) This calculation should exclude rows with e and f. Although I encountered a similar issue before, there was no solution for this spe ...

javascripthtml

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

css