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

Question

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).

https://i.sstatic.net/Kia2N.png

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.

html css

Answer 1

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>

Answer 2

@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>

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

Answer №1

Similar questions

Change an ASP page into an image format such as JPEG or PNG

What is the best way to include a drop-right menu within a dropdown menu?

Formatting Anchor Tags Inside a Table Data Element

Iframe Loading at Lightning Speed

Encountering numerous errors when attempting to incorporate lottie-web into my JavaScript file

HTML Scroll Blocking

Adjust the text positioning to be lower without affecting the placement of the image

Animating a gradient within an SVG element following along an SVG path

CSS - positioning the sidebar on the far left edge of the screen (refer to image)

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Utilize jQuery function within an HTML form

I'm having trouble with my code not fitting all screen resolutions. I usually code on a Macbook, but recently switched to a Windows computer and now everything is out of whack

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

Tips for creating an input box that only accepts floating point numbers:

Toggle switch unable to reset upon reloading the page

Responsive menu not collapsing properly and appearing funky in Drupal

Go to a different page section using MUI 5

Fill various dropdowns with a list or array of values discreetly without displaying the populated values on the visible interface

Encountering an error message stating, "Unable to assign value to 'onclick' property"

Eliminate styling that is specific to certain browsers