Text that adjusts its size based on the available space between columns within a row

I am currently developing an application using angular and bootstrap, and I have a requirement to insert a link between two columns in the third row of iteration.

Here is what I have attempted so far:

Html:

<div class="container">
    <div class="row">
        <div class="col-6" *ngFor="let data of suggestions">
            <div class="data-wrapper">
                {{ data.id }}
                <br>
                {{ data.name }}
            </div>
        </div>
        <span class="middle-text-link"> Click here to go to link </span>
    </div>
</div>

Css:

.data-wrapper {
  padding: 30px;
  border: 1px solid #000;
}

.middle-text-link {
    position: absolute;
    top: 55%;
    left: 25%;
    background-color: red;
    color: #fff;
    padding: 15px;
}

Working Demo : https://stackblitz.com/edit/angular-bootstrap-4-starter-dr8t57

Although the above CSS properties were used to place the link text between columns, it lacks responsiveness.

I need assistance on how to create a responsive layout where a link text can be placed between two columns in the third row. Thank you!

cssangulartwitter-bootstrapbootstrap-4

Answer №1

To align the text in the middle, employ the Transform property 

.centered-text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
   background-color: red;
   color: #fff;
   padding: 15px; 
}

Answer №2

I recently made a modification to your CSS code by adding 

top:50%;left:50%;transform: translate(-50%,-50%)
to center it both horizontally and vertically. It's important to ensure that the parent element has the class "container parent" and is set to relative positioning. Here is how your updated CSS should look:

.parent{
  position: relative;
}
.middle-text-link {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
   background-color: red;
   color: #fff;
   padding: 15px; 
}

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

Display an image on an HTML page based on the TypeScript data in an Ionic Angular application

After retrieving user profile data from the database and storing it in an observable, I am able to access properties such as profileData.username, profileData.msgnumber, and more. When profileData.avatar returns the name of the avatar the user is using, I ...

htmlangulartypescriptionic-framework

Exploring the Concept of Template Element Recursion in Angular JS 2

In my Angular 2 project, I encountered a situation where I needed to iterate through ngFor based on child elements. My component should be able to render a list based on the input provided. Here is an example of the data structure: [ { name: 'ABC ...

javascriptangulartypescript

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...

javascriptjqueryhtmlcssangularjs

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

Tips for transferring data to a child component's @Input using Observables

I've created an angular component that serves as a tab within a for loop on my HTML page: ... <ng-container *ngFor="let tabData of data$ | async;"> <tab-component id="{{ tabData.id }}" name="{{ tabData.name }} ...

javascriptangulartypescriptrxjsrxjs-observables

Creating a flexible image layout within a container with relative positioning

I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...

javascripthtmlcss

Unable to render image: Django3 powering Angular8 interface

I encountered a situation similar to the one described in this Stack Overflow question, but unfortunately, the solution provided did not work for me. I am struggling to get my image to render with the Angular frontend. When I navigate to my browser, {{rec ...

djangoangulardjango-rest-framework

Utilizing Ajax to dynamically update the color of a button when it is clicked from a different device

Currently, I am developing a program for my own use within my local community theater. The setup will involve a computer in the control room (Sound Booth) and another computer backstage. My plan is to create a grid of around 10 interactive "buttons" on th ...

phphtmlmysqlcssajax

Ag-grid: how to reset a cell when using the "agSelectCellEditor"

According to the documentation on ag-grid: If Backspace or Delete is pressed, the default editor will clear the contents of the cell. However, this behavior does not apply when using the "agSelectCellEditor." Pressing Delete or Backspace puts the cell i ...

javascriptangulargridag-gridag-grid-angular

Ways to eliminate the up and down arrow in the MUI number field

How can I remove the up and down arrow from the MUI number field? My current version is 5.3.0. Is it possible to achieve this using the sx prop? https://i.sstatic.net/fABz9.png Learn more about the sx prop here <TextField sx={{...}} id="outli ...

cssmaterial-ui

Is it possible to establish globally applicable values using CSS?

Is it possible to set global attributes within a wordpress site to override all instances of specific CSS styles across multiple locations for themes, 3rd party plugins and more? For instance, if I want to apply 'border-radius: 0px;' to all butt ...

htmlcsswordpress

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Tips for displaying only the initial 15 characters of a text value

The content extracted from a .ts file is being displayed on the home.html page. I am aiming to display only the initial 15 characters followed by 3 dots (...). Despite my efforts, the following code snippet is not functioning as expected: home.html < ...

angulartypescriptionic-frameworkionic3ionic4

Do you have any suggestions for optimizing an Angular 15 reactive form that gets filled with data from an API?

Creating an Angular 15 Reactive Form with FormGroup As I delve into the documentation to construct a form with 4 inputs that are populated with data retrieved via GET requests and then updated upon submission through PUT requests, I find that it is functi ...

angularrxjsangular-reactive-formsrxjs-observables

Incorporating Paypal subscription functionality and refining subscription challenges

The angular project I'm working on requires configuring a PayPal payment gateway for create subscription, cancel subscription, and upgrade subscription functionalities. I have encountered two issues with PayPal: 1) The PayPal button has been success ...

angularpaypalpaypal-sandboxpaypal-ipnpaypal-subscriptions

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

javascriptjqueryhtmlcss

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

I currently have a carousel on my website created using Bootstrap that displays 4 columns of thumbnails. You can view the carousel here. When navigating to the third page of the carousel, you will notice that the container increases in height to accommodat ...

csstwitter-bootstrap

Uncertainty surrounding the effectiveness of the display: block CSS property - my demonstration is not yielding the expected results

I encountered an issue while using display: block. To better understand the problem I'm facing, please check out this example link: Take a look at the HTML code below: <div id="container"> <div id="titleBox"> <p id="myT ...

htmlcsslayoutxhtml

Ways to show an object by comparing its object ID to the ID received from the server

I have a collection of objects structured as follows: defined in FruitModel.ts export interface ColorByFruit{ Id : number; name : string; color : string; } const Fruits: ColorByFruit[] = [ {Id:1, name:"Apple", color:&quo ...

node.jsangularjsangulartypescript

Display a loading animation when managing multiple HTTP requests simultaneously for the same API

I am dealing with a form that contains multiple posts. The user can choose to comment on a single post or multiple posts and submit them. However, the challenge I am facing is that I only have one API endpoint to save user comments. For example: http://lo ...

jsonangularoptimizationrxjs