Display the content within a div as a background image

Question

Display the content within a div as a background image

I am attempting to design a div that initially displays the text loading..., and then can be covered by new elements as they are loaded into it. Below is the code snippet I am working with:

<div class="results" style="position:relative;" *ngIf="showResults">
    <!-- Show 'loading...' before the results load, which will then overlap this text -->
    <div stlye="position: absolute; z-index: -1;">Loading ...</div>
    <!-- Angular2 loop to asynchronously load results -->
    <div *ngFor="let loc of searchLocations | async" (click)="selectLocation(loc)" class="search-result">
        {{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }}
    </div>
</div>

However, when I execute this code, the result is similar to what is shown in the following image:

https://i.sstatic.net/5U2J0.png

The issue is that my 'loading...' text has its own boundary, instead of allowing the subsequent elements to overlap it. How can I achieve the desired effect?

html css

Answer 1

Answer №1

To simplify the process, consider creating a boolean variable to handle the loader display.

export class YourComponent(){
   showLoader:boolean = true;
   constructor(){
       // Depending on your GET request implementation
       // Set isLoading to false once data is fetched
       // Example: after fetching data and assigning it to searchLocations
          showLoader = false;
       } 
   }
}

In your HTML template, utilize *ngIf directive for conditional rendering:

<div style="position: absolute; z-index: -1;" 
      *ngIf="showLoader">Loading ...</div>

You have the option of turning the loader into a reusable component or linking it to showResults variable by placing the loading div outside the showResults div with *ngIf="!showResults". This might require some styling adjustments.

Answer 2

To simplify the process, consider creating a boolean variable to handle the loader display.

export class YourComponent(){
   showLoader:boolean = true;
   constructor(){
       // Depending on your GET request implementation
       // Set isLoading to false once data is fetched
       // Example: after fetching data and assigning it to searchLocations
          showLoader = false;
       } 
   }
}

In your HTML template, utilize *ngIf directive for conditional rendering:

<div style="position: absolute; z-index: -1;" 
      *ngIf="showLoader">Loading ...</div>

You have the option of turning the loader into a reusable component or linking it to showResults variable by placing the loading div outside the showResults div with *ngIf="!showResults". This might require some styling adjustments.

Display the content within a div as a background image

Answer №1

Similar questions

css customized vertical scrollbar for a static division panel

iOS Font Display Issue in Ionic 2

Stop jQuery timeout when mouse hovers over a div

Column that adjusts to different screen sizes

Improving efficiency of basic image carousel in Angular 8

Is the checkbox automatically selected if a property is specified?

Strings of text randomly popping up above the page's content while utilizing the Repeater control

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

Is there a way to prevent the removal of CSS files from a module when deploying a Next JS API to Vercel?

What is the best way to apply a top padding to a background image using CSS?

Incapable of smoothly scrolling through individual div tags

What is the proper way to utilize a variable within the translate3d function?

Show HTML content retrieved from a JSON response

Moving elements using CSS

Ensure that the footer is always positioned at the bottom of the page according

What is the best method to vertically center a container in bootstrap 4 at a specified height?

Creating a secondary menu within the existing menu using Bootstrap 3

Is there a way to make the delete button remove just one item from the local storage?

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

Having difficulty sending a value with %45 to a REST API