Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field?

Check out this example

The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing menu.

.combobox-wrapper {
  position: relative;
  width: 20em;
  min-height: 1.5em;
  display: flex;
  align-items: center;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.combobox-label {
  width: 50%;
  padding-top: 0.5em;
}

.combobox-input {
  font-size: 16px;
  font-weight: normal;
  height: 30px;
  padding: 4px 10px;
  width: 50%;
}

.combobox-options {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15em;
  overflow-y: auto;
  left: 0;
  top: calc(100% + 0.25em);
  z-index: 100;
  display: block;
}

.combobox-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative;
}

<div class="combobox-wrapper">
   <label for="combobox-input" class="combobox-label">
     Countries
   </label>
   <input id="combobox-input" />
   <ul id="combobox-listbox" role="listbox" class="combobox-options">
     <li tabindex="0" id=":rl:-BZ" role="option" value="BZ" class="combobox-option highlighted"><span>Belize</span></li>
     <li tabindex="0" id=":rl:-BJ" role="option" value="BJ" class="combobox-option"><span>Benin</span></li>
   </ul>
 </div>

Answer №1

Perhaps you're interested in trying out the following:

index.html

<div class="combobox-wrapper">
<div>
<label for="combobox-input" class="combobox-label">
Countries
</label>
<input id="combobox-input" />
</div>
<div>
<ul id="combobox-listbox" role="listbox" class="combobox-options">
<li tabindex="0" id=":rl:-BZ" role="option" value="BZ"
class="combobox-option highlighted"><span>Belize</span></li>
<li tabindex="0" id=":rl:-BJ" role="option" value="BJ"
class="combobox-option"><span>Benin</span></li>
<li tabindex="0" id=":rl:-BM" role="option" value="BM"
class="combobox-option"><span>Bermuda</span></li>
<li tabindex="0" id=":rl:-BT" role="option" value="BT"
class="combobox-option"><span>Bhutan</span></li>
<li tabindex="0" id=":rl:-BO" role="option" value="BO"
class="combobox-option"><span>Bolivia</span></li>
<li tabindex="0" id=":rl:-BA" role="option" value="BA"
class="combobox-option"><span>Bosnia and Herzegovina</span></li>
<li tabindex="0" id=":rl:-BW" role="option" value="BW"
class="combobox-option"><span>Botswana</span></li>
<li tabindex="0" id=":rl:-BV" role="option" value="BV"
class="combobox-option"><span>Bouvet Island</span></li>
<li tabindex="0" id=":rl:-BR" role="option" value="BR"
class="combobox-option"><span>Brazil</span></li>
<li tabindex="0" id=":rl:-IO" role="option" value="IO"
class="combobox-option"><span>British Indian Ocean Territory</span></li>
<li tabindex="0" id=":rl:-BN" role="option" value="BN"
class="combobox-option"><span>Brunei Darussalam</span></li>
<li tabindex="0" id=":rl:-BG" role="option" value="BG"
class="combobox-option"><span>Bulgaria</span></li>
</ul>
</div>
</div>

style.css

.combobox-wrapper {
    position: relative;
    width: 20em;
    min-height: 1.5em;
    display: flex;
    align-items: center;
    border-radius: var(--form-field-border-radius);
    outline: none;
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
  
  }
  
  .combobox-label {

    color: var(--color-text-dark-gray);
    padding-top: 0.5em;
  }
  
  .combobox-input {
    font-size: 16px;
    font-weight: normal;
    color: #4d4d4d;
    background: #ffffff;
    border: 1px solid #828995;
    height: 30px;
    padding: 4px 10px;
    width: 50%;
  }
  
  .combobox-options {

    list-style: none;
    max-height: 15em;
    overflow-y: auto;
    border: 0.05em solid var(--color-bg-gray);
    border-radius: var(--form-field-border-radius);
    left: 0;
    top: calc(100% + 0.25em);
    background-color: var(--color-white);
    z-index: 100;
    display: block;
  }
  
  .combobox-option {
    padding: 0.25em 0.5em;
    cursor: pointer;
  }

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

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...

Animating Text Around a Circle Using HTML5 Canvas

Can someone please help me figure out what is wrong with this code? It's not rotating as it should, and the text looks messed up. I've been trying to solve this problem for hours but can't seem to get it right. function showCircularNameRot ...

Is there a sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...

jquery toggle for partial visibility not functioning properly

Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...

Obtain an Element Using Puppeteer

Currently grappling with a sensitive issue concerning puppeteer. The HTML structure in question is as follows: <tbody> <tr rel="0" class="disabled" id="user6335934" class="odd"> ...

A single list is utilized by multiple HTML5 selects

If I have 10 fields in a form, each requiring a select option from the year 1950 to 2017, can I create one list from that range and have each select reference it? Or do I need to make ten separate lists for each select? Edit: An example could be the birth ...

Tips for utilizing the setInterval function in javascript to update the background color of the body

Currently, I am tackling a project for my course and I am seeking to modify the body's background color on my website randomly by leveraging the setInterval technique in my JavaScript file. Any suggestions on how to achieve this task? ...

Enhancing accessibility: the use of sr-only or aria-label

According to MDN: In this scenario, a button is designed to resemble a standard "close" button, featuring an X in the center. Since there is no visual cue indicating that the button closes a dialog, the aria-label attribute is utilized to provide this i ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

I am trying to use jQuery to dynamically change classes based on certain conditions. However, I am encountering an issue where the class of my 'home' link remains unchanged even after clicking on another link. How

How can I modify my jQuery code to achieve the following: If the 'home page' is active, then apply CSS class A (dark green color) to the 'home link'; otherwise, apply CSS class B (brown color). (In essence, I want the relevant link to ...

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component: Vue.component('list-category', { template: "#lc", props: ['data', 'category', 'search'], data() { return { open: false, categoryId: this.category ...

Adjust the navigation text and logo color as you scroll on the page

I am new to HTML and CSS and I am working on a website with PagePiling.js scrolling feature. I want to change the color of my logo image and navigation text dynamically as I scroll to the next section. Specifically, I only want the part of the logo and tex ...

Automating Web Form Completion with VBA and Selenium

I am experiencing an issue with filling out a form. I have attempted the following methods: driver.FindElementByXPath("//div[@id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "2112345 ...

Tips on using jQuery to horizontally align an element in the viewport

Although this question has been raised before, my situation is rather unique. I am currently constructing an iframe for future integration into a slideshow component on the website. The challenge lies in the fact that I have a dynamically sized flexbox th ...

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

How can I transform an HTML element into a textarea using CSS or JavaScript?

While browsing a webpage, I discovered a <div> element with the class .plainMail and I want to find a way to easily select all its text by simply pressing Ctrl+A. Currently using Firefox 22, I am considering converting the div.plainMail into a texta ...

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...