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: https://i.sstatic.net/hBa5h.jpg
Desired Image: https://i.sstatic.net/NBuR1.jpg
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>
Currently, I am working on a service that handles items. itemList= signal<Item[]>([]); reset(){ this.itemList.set([]); } add(item){ this.itemList.update(list => { const ind = list.findIndex(o => o._id == item._id); if (ind !== -1) { ...
My current task involves retrieving a Firebase document property based on the specified model: After successfully locating a document with this code snippet: //Users - collection name, uid - document uid. I am attempting to access the isAdmin property u ...
Currently in the process of constructing my angular project using webpack alongside source-map-loader to extract source maps, like this: module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: "pre&quo ...
When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...
Hello, I am seeking advice on how to effectively organize my code structure: Here is a simplified representation of the user interface: export interface User { Account: string; Name: string; EMail: string; PictureURL: string; Department: string; JobTitle ...
Here are the imports: import { Component,OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import { Application } from './Application'; import { Http, Response } ...
Whenever I click on the Material UI text Field during login, the screen gets pushed down and cuts off content at the top of the page. View image description here -I have examined my CSS to see if setting the container height to 100vh is causing this issue ...
My dropdown menu is not working despite adding all necessary Bootstrap CDN and files along with the jQuery script. Even with the table being handled by JavaScript, the button does not respond when clicked repeatedly. I suspect the issue lies within the han ...
I've been working on running my first Angular 2 app. I carefully followed the steps provided by angular2. However, upon running the command npm start, I encountered the following error in the terminal: No bs-config.json or bs-config.js override fil ...
I'm currently working on a feature that allows users to select colors using the jQuery minicolor widget. I really like how the color swatch appears inside the widget, but I'm having trouble replicating that same look in a data table. When I try t ...
I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...
While experimenting with pipe and subscribe methods, I encountered an issue. When using pipe with tap, nothing gets logged in the console. However, when I switch to using subscribe, it works perfectly. Can you help me figure out what I'm doing wrong? ...
My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...
Looking to navigate through a nested object structure called purchase. Within this structure, there is a sub-array named purchaseProducts which contains another sub-array called products along with additional data. What methods do you suggest for efficien ...
Check out my code snippet: export class voiceRecognition { constructor() { } public startVoiceRecognition() { const recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimresults = false; recogn ...
I recently set up an Ionic Angular project and integrated Capacitor to access native code functionalities. My project utilizes tesseract.js, as well as Capacitor core and camera plugins. However, I encountered an error while building the Android project: ...
I am having trouble getting my text to format properly on my web page. I have defined rules in my style sheet to center an object on the screen, but it's not working as expected. Here is the code for my web page: body { text-align: center; } h1 { ...
I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...
Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...
In my app, there is a search feature that filters data based on user input and displays a list of matching results. I am trying to make the text that was searched by the user appear bold in the filtered data. For example, if the user searches 'Jo&apos ...