I am using ngFor to iterate through a list of images like this:
<div class="image-holder" *ngFor="let image of datasource">
<img src="{{image.url}}" height="150" />
</div>
Below is the corresponding CSS code:
.image-holder
{
display: flex;
justify-content: space-between;
}
Current Image:
Desired Image:
A more modern approach would be to utilize display: flex on a container element rather than relying on the outdated float:
html
<div class="images-wrapper">
<div class="image-holder" *ngFor="let image of datasource">
<img [src]="image.url">
</div>
</div>
css
.images-wrapper {
display: flex;
flex-wrap: wrap;
}
.image-holder {
padding: 2px; /*for white border around images*/
height: 120px;
}
.image-holder img {
height: 100%;
}
Take a look at this interactive example, which focuses on css/html without angular involvement.
It seems like a simple CSS fix can solve this:
.picture-container
{
display: flex;
justify-content: space-between;
}
.picture-container img {
height: 150px;
float: left;
}
You can maintain the same HTML structure by removing the height attribute from the img tag:
<div class="picture-container" *ngFor="let picture of dataset">
<img src="{{picture.url}}" />
</div>
Quick suggestion:
When adjusting CSS styles, you can use Chrome or Firefox's element inspection tool to modify the CSS rules in real-time until you achieve the desired look. Once satisfied, transfer those rules to your code for consistency.
Update 1 - Flexbox solution:
gallery {
padding: .5vw;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
gallery item {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
height: 150px;
margin: .5vw;
}
gallery item img {
height: 100%;
}
Corresponding HTML:
<gallery>
<item *ngFor="let picture of dataset">
<img src="{{picture.url}}" />
</item>
<gallery>
As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...
I am designing a loading screen for my website that includes the loading of multiple images, scripts, and other elements. While the HTML and CSS part is working well, I need to ensure that the "loading..." image is loaded before anything else on the page. ...
Within a container, I have organized three sections. As I adjust the size of my browser to a maximum width of 668px, I want section 1 and section 3 to be displayed in one row while section 2 is placed below them. The width of section 2 should be proportion ...
Trying to access public data using the Google Books API locally: An error occurred with the authentication credentials. It seems that an OAuth 2 access token, login cookie, or another valid authentication credential is missing. For more information, visit ...
Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...
I'm currently in the process of developing an Ionic-Angular-app. I require a datetime component on a page to set the creation date of an object. I am using formGroup for this purpose, but whenever I choose a different date, it always reverts back to t ...
I am trying to figure out how to schedule a method in my code using rxjs/timer. Specifically, I want the method to run at precisely 10 AM after an initial delay of 1 minute. However, my current implementation is running every 2 minutes after a 1-minute d ...
I have a project in Angular 10 Universal where I am using JWT obtained from localhost to verify requests for restricted routes. Currently, I am utilizing the following package for authentication: https://www.npmjs.com/package/@auth0/angular-jwt The issue ...
I have a code snippet below that demonstrates how to create data for a CSV file and download the CSV file in a zip folder: generateCSVfiles() { this.studentdata.forEach(function (student) { this.service.getStudentDetails(student.studentId).subsc ...
Currently, I am utilizing ngx-translate within my Ionic 4 project to incorporate multiple languages. Among the languages supported is Arabic and the functionality of ngx-translate works seamlessly by dynamically changing the dir attribute for the HTML tag. ...
I am managing two sets of lists where strings will be transferred between them. One set contains a list of strings for searching purposes. The other set contains the same list of strings but is not used as a filter. The second set functions in a similar ...
Question: I am currently trying to pull data from a website using Angular and I would like to export this data into an Excel file. Additionally, I want the ability to update this file with more data in the future. Is there a library that can help achieve ...
// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...
What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...
I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...
I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...
I'm having trouble with selecting options on a selectbox when the select option is overlapping my menu. The menu I'm using is a jQuery Plugin. When the select box overlaps the menu, the options are hidden. I tried adjusting the z-index of my div ...
Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...
I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...
I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...