Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component.

<div class="list-container">
    <div class="row">
        <div class="content">
            Sample Content 1
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
    <div class="row">
        <div class="content">
            Additional Content 2...
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
</div>

The action div is positioned absolutely with a z-index lower than that of the content div.

The objective is to have the content div overlap the absolutely positioned action div, all without applying a background-color to the content div. When the user swipes the list, the content div will be moved along the X-axis to reveal the action underneath it.

Check out a live example here.

Note that the content in the second row does not have a background color applied, which allows the action to remain visible.

Are there alternative methods to achieve this effect?

cssangulardomcss-position

Answer №1

Updated the stackblitz by initially setting the action class to have display:none. Once animated, the css property display is then set to block.

anim() {
  requestAnimationFrame(() => {
    this.value -= 1;
    if (this.value > -50) {
      this.anim();
      (document.querySelector('.action') as HTMLElement).style.display = 'block'
  }
});

Make sure to include the following css in your file:

.action{
  ...
  display:none;
}

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

Sharing cookies between the browser and server in Angular Universal

After trying to integrate cookies in browser and server using the example from this link, I encountered an issue. The cookies do not appear to be shared between the browser and the server. The cookie I set on the browser side is visible, but when I try to ...

angularcookiesserver-side-renderingangular-universal

The next/font feature functions perfectly in all areas except for a single specific component

New Experience with Next.js and Tailwind CSS Exploring the next/font Package Delving into the realm of the new next/font package has been quite interesting. Following the tutorial provided by Next.js made the setup process smooth sailing. I've incorp ...

javascriptcssnext.jsfontstailwind-css

How can I programmatically trigger the optionSelected event in Angular Material's autocomplete?

I'm currently facing an issue with my Angular Autocomplete component. I am trying to trigger the (optionSelected) event within the ts file after a different event by setting the input with the updated option using this.myControl.setValue(options[1].va ...

angulartypescriptautocompleteangular-material

using Angular's reactive forms to enable/disable form field

I have a straightforward reactive form, utilizing the Angular Material framework. this.firstFormGroup = this.fb.group({ builder_first_name: ['', Validators.required], builder_last_name: ['', Validators.required] ...

angularangular-material

Encountering multiple error messages from Protractor @types

Lately, I've been using the Angular2 Webpack Starter created by AngularClass and I've started encountering some perplexing errors with Protractor. When trying to build, these errors pop up: Module 'webdriver' has no exported member &ap ...

angulartypescripttypesprotractor

Dash: Streamlining the process of updating numerous elements within a callback

I am facing a challenge with my Dash app where I have multiple html.Div components that all look and are laid out similarly. When I click on a checkbox, I want all of these elements to be hidden. The common solution suggested is to create multiple outputs ...

pythonhtmlcssplotly-dashdashboard

Tomcat serving Maven web app is unable to locate Angular's /assets/ directory

My web application built with Maven has a particular structure that includes directories like 'dist', 'errors', and 'WEB-INF' within the 'webapp' directory. The 'dist' folder specifically contains all of t ...

angularmaventomcatmaven-war-pluginmaven-resources-plugin

Issues with Angular ng-bootstrap tabset component not functioning as expected

{ "name": "ModalWindow", "version": "1.0.0", "repository": { "type": "git", "url": "" }, "scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --mode development --open" }, "license": "MIT", "depend ...

angulartypescriptangular5ng-bootstrap

Tips for incorporating a notification bar below the header

I'm fairly new to CSS and I'd like to create a black notification bar for free shipping right below the header, with white text. It needs to span the full width of the browser. I attempted to achieve this using CSS and `header::after`, but my te ...

css

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

javascripthtmlcssreactjsnext.js

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

I am facing an issue while trying to implement ngModel in my code. The code is not executing properly and an error is being displayed. Below is the code snippet: contact-form.component.html: <div class="container"> <form> <div class ...

htmlangular

Which is better: Utilizing ASP.NET Core or ASP.NET Core MVC in tandem with Angular for the

Currently in the planning stages of developing a website or web application using .NET Core for the backend and Angular for the frontend. One aspect that is proving to be confusing is whether to use ASP.NET Core or ASP.NET Core MVC on the backend. I'm ...

angularasp.net-coreasp.net-core-mvc

Instructions for adding a prefix of +6 in the input field when the user clicks on the text box

Recently, I've been utilizing Angular Material elements for input fields which can be found at this link. An interesting feature that I would like to implement is automatically adding '+6' when a user clicks on the phone number field. You ...

angularangular6angular5

How to assign a class specifically to a single row using Angular 2

I have a tab containing multiple rows, and I am trying to add a class to the current row when I click on my delete button. The delete button returns the id of the row that needs to be deleted. My issue is that I am unsure how to dynamically add a class to ...

angularangular2-template

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

When combining Angular with Workbox, you may encounter a ChunkLoadError stating that the loading of a specific chunk was refused to execute due to mismatch

When I added Workbox to Angular for the first production deployment, everything worked smoothly. However, after updating a module, rebuilding Angular, and injecting Workbox again, I encountered an issue. Upon visiting the site, I noticed that the service w ...

node.jsangularbrowser-cacheworkbox

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

What steps can I take to concentrate on a particular mat-tab?

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0"> <mat-tab label="DATOS EXPEDIENTE"> <div class="example-large-box mat-elevation-z4"> <app-informe-expediente></app ...

angulartabsangular-materialmat-tab

Troubleshooting a problem with CSS styling in a jQuery bounce effect

In my current project, I am experimenting with creating a unique 'hovering' link. When the user hovers over an image and then moves the mouse away, I want the link to 'jump' back instead of using jQuery animation. +-----------+ | I ...

jqueryhtmlcss