Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the width to 100%, but this causes it to extend beyond the input field's boundaries.

.suggestion {
    cursor: pointer;
    background: #FFF;
    box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
    padding: 5px 20px 5px 20px;
    border-radius: .28571429rem;
    border: 0px solid rgba(34,36,38,.15);
    z-index: 1;
    
    position: absolute; 
    width: inherit;
}
.search-res{
    margin-bottom: 5px;
}
.search-res:hover{
    margin-bottom: 5px;
    color: #2196f3;
}

.warning {
    color: orange
}
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
  <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
  </div>
</div>

htmlcsswidthoverlapinput-field

Answer №1

Here is an illustration:https://codepen.io/anon/pen/KvgoPX

The modifications I made include:

  • To make the suggestion div absolute, it needs to be relative to the input in some manner. Hence, there's an input container surrounding it. This container can have any width you prefer.
  • There is another element included to demonstrate overlaying effects.

.inputContainer {
  width:200px;
  position:relative;
  background:green;
}

input {
  width:100%;
}

.suggestion {
  cursor: pointer;
  background: #FFF;
  box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
  padding: 5px 20px;
  border-radius: .28571429rem;
  border: 0px solid rgba(34,36,38,.15);
  z-index: 1;
  box-sizing:border-box;
  text-align:center;
  position: absolute; 
  width: 100%;
}
.search-res{
  margin-bottom: 5px;
}
.search-res:hover{
  margin-bottom: 5px;
  color: #2196f3;
}

.warning {
  color: orange
}

<div class="inputContainer">
  <input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
  <div class="suggestion" *ngIf="suggestions">
    <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
    </div>
  </div>
</div>

<div class="otherStuff"> This is where other objects are </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

Django static files reference

sample code snippet tooltip reference navigating to the correct file path FILES: settings.py STATICFILES_DIRS = [ BASE_DIR / "static" , ] base.html {% load static %} How can I properly link my static files in the html line below?... &l ...

pythonhtmlcssdjangoweb

Having trouble with moving the svg:svg element?

I'm struggling to move an svg element that is nested within another svg. I am trying to directly manipulate the x and y values, but I keep encountering a "read-only" error. I attempted to use transform instead, but it doesn't seem to have any eff ...

javascripthtmlsvg

Link embedded in prism formatting, encased in code snippet

In the HTML template, I have the following code snippet: <pre> <code class="language-markup"> {% filter force_escape %} <Item> <MarkUp><a href="http://google.com">Google</a></MarkUp> <No ...

javascripthtmlprism.js

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

I recently implemented Bootstrap 4.6 into my project. The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when th ...

htmlcsstwitter-bootstrapbootstrap-4

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

javascripthtmlcssbootstrap-4html5-canvas

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

Enhance the responsiveness of full-screen pop-ups

My current project involves creating a full-screen pop-up for a specific application. /* Custom Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; ...

htmlcssresponsive-design

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

javascripthtmlcssresponsive-design

VueJS loop creating excessive div element

I am facing an issue where extra div is being created while displaying cards from API data, causing unnecessary space on the page. Here is my response: [ ... { "id": 6, "name": "Highway", ...

htmlvue.js

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

javascriptcsstextwarningsphaser-framework

I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other link ...

csshtml

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

How can I design a custom status update box inspired by the look and feel of Facebook

I have searched extensively online for a guide on creating a CSS box similar to Facebook's status update callout box. This box features a square shape with a small notch at the top. Could someone assist me in crafting a CSS design for this type of bo ...

csscallout

Encountered an error trying to access '0' property of an undefined object when iterating through data in angular framework

My API is returning data in the format shown below: "fileName": "data.txt", "onlyInFile1": [ { "_id": "60618e87c2077428e4fedde5", "TERMINAL_ID": "Y6152114", "EXTERNAL_STAN": & ...

htmlangulartypescript

Tips for arranging columns and rows in a mat-dialog box

In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the hori ...

cssangularlayoutangular-material

Choose the value of the adjacent text input with jQuery

I am working with dynamic checkboxes and corresponding text inputs. My goal is to alert the value of the text input when a checkbox is checked. However, I am having trouble retrieving the correct value of the text input associated with each checkbox. Addit ...

jqueryhtmldom

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

javascriptjqueryhtmlcss

CSS transitions following with visual/codepen

Does anyone know how to animate two images, bringing them to a central point before rotating them simultaneously? I'm struggling with transforming the svgs prior to starting the animation. Take a look at this example. My goal is to apply transform: r ...

csscss-animations

How can I switch between columns in a dual-column layout?

In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumberso ...

jqueryhtmlcssflexbox

having difficulty retrieving website content using the ui.router

This is my HTML code: <!doctype Html> <html lang="en"> <head > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l ...

htmlangularjs