Flexbox is displaying items in a column instead of a row

I'm facing an issue with my flexbox layout. I have set it up to display two elements per row, and there is enough width for this arrangement. However, each element is taking up one whole row instead of appearing side by side as intended. Below is the code I am using:

gallery.html:

<div class="container" *ngFor="let imageOrFile of imagesAndFiles">
  <div class="image">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>

gallery.scss:

.container {
  display: flex;
  flex-direction: row;
}

.image {
  width: 40%;
  height: 200px;
}

Within the child component html:

<p>{{ image.name }}</p>

This is the current result:

https://i.sstatic.net/SQKKn.png

Can anyone help me understand why this is happening, and how can I adjust the layout to have both elements in one row?

htmlcssangularflexbox

Answer №1

Revamp your gallery.html:

<div class="container">
    <div class="image" *ngFor="let imageOrFile of imagesAndFiles">
        <dispo-einsatz-dokumente-gallery-image-item [image]="imageOrFile">
        </dispo-einsatz-dokumente-gallery-image-item>
    </div>
</div>

*ngFor generates N divs with class "container", resulting in N rows

Answer №2

It is recommended to move the for loop to the div.image element in order to avoid rendering the container class element multiple times. Instead, you should aim to render the container class element once with multiple image class elements.

<div class="container">
  <div class="image" *ngFor="let imageOrFile of imagesAndFiles">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>

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

Trouble with CSS and jQuery: Is document.height accurately reported? Why won't the div stretch vertically?

Surprisingly, I haven't been able to find anyone else facing this issue. O_o Check out the code on Pastebin here The code is causing a gap between the end of #main and the end of the actual page on IE, Chrome, and Safari, but not on Firefox. The ba ...

jquerycsshtml

How can Angular 2 populate forms with data retrieved from a promise in a database?

I'm currently navigating through the world of Angular and Firebase, and I’ve hit a roadblock when it comes to populating my forms with data from Firebase promises. Understanding how to work with promises versus observables is also proving to be a ch ...

angularfirebaseangular-promiseangular2-formbuilder

Issues may arise when attempting to navigate within a lazy module using Angular Nativescript

Recently, I utilized a template called Nativescript-Tabs-Template from this GitHub repository. While attempting to navigate to a sibling component (both within the same lazy module), I encountered the following issue: showItem() { this.routerExtensi ...

angulartypescriptnativescriptangular2-nativescriptangular-router

Customize checkbox and label using jQuery

I have a scenario where I have multiple checkboxes and corresponding labels. When the answer is correct, I want to change the background color of the selected checkbox and label. <input type="checkbox" id="a" class="check-with-label" /> <label fo ...

javascriptjquerycssajax

Validating Angular input for decimal values based on specific criteria

Is there a way to limit user input to numbers with only 2 decimal places if both itemNew.UL_DATA and itemNew.LL_DATA are equal to 0 or blank? <ion-col col-2> <input (keypress)="ShowKey();" [style.display]="itemNew.UL_DATA== ...

angularionic-framework

Adding animation to the initial loading process of a Vue application

I want to include an animation when the application's modules are loading for the first time. I have attempted to use an image, but I am unable to add an animation to it. Adding a CSS file did not always work as expected. I then tried utilizi ...

javascriptcssvue.jssingle-page-application

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

javascripthtmlcss

How do I attach an event listener to a select box that is created dynamically using JavaScript?

I'm new to web development and I'm currently working on a project where I need to create a select box dynamically within a div that is also created dynamically when the page loads. However, I'm facing an issue with adding an onchange Event L ...

javascripthtmlevent-listener

Utilize the serialized data to pre-fill the form fields

After using the serialize() function on my form and saving the string, I am now looking for a function that can repopulate values back into the form from the serialized string. Is there such a function available? ...

javascriptjqueryhtmlwebforms

What are the best strategies for ensuring a responsive website functions flawlessly on mobile devices

I recently completed the development of my website wwww.griyapustaka.com. Despite being responsive, it does not seem to work properly on mobile devices. When I opened it on my phone, the screen was completely blank. Can anyone help me identify the issue? ...

phpjqueryhtmlcss

Guide on transferring data from a DIV element to a form based on PHP

Is it possible to submit the value of a DIV element acting as a checkbox in a PHP form? I'm having trouble getting the DIV response to pass to the PHP file. HTML: <form action="test.php" method="post"> <div id=" ...

phpjqueryhtml

Retrieve PDF files from .Net Core Web API using Angular

I've been struggling with this issue for several days now. Despite searching through many threads on Stackoverflow, I couldn't find a solution that worked for me. Below is the Web API code meant to return a simple PDF file: [HttpGet("pd ...

c#angulartypescript

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

What is the best way to add a "Save to Favorites" link within a modal window

I have integrated the NASA API to showcase images, where clicking on an image reveals a modal containing additional details. There is also a save to favorites functionality in the tutorial that allows users to save images and details to a local storage sec ...

javascripthtmlcsslocal-storage

Steps to eliminate the Bearer authorization header in an Angular 4 POST request to an API

Is it possible to exclude the Authorization Bearer in a POST request? The following code was not successful in removing the authorization bearer that is being added by the HTTP interceptors. Error: 403 - Unauthorized Request. The Authorization header is ...

angularangular-materialangular4-formsangular4-httpclient

Is there a way for me to determine the value or array that has been passed in the form?

I am facing a challenge and need help solving it. I have a project that involves interacting with a database, where I created a CRUD HTML table for data manipulation. There are 15 tables in the relative database, and I need to insert, delete, and edit reco ...

phphtmlmysqlsqlcodeigniter

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

javascriptangulartypescriptangular-material

Leveraging src css within the React public directory

I have set up my React application to import a stylesheet from the src folder using import './css/styles.css' at the top of App.js. In the public folder, I have created a basic /docs/index.html file that is linked to from the React app but opera ...

htmlcssreactjs

Creating formatted code blocks within my HTML document

I'm currently working on achieving this layout in my HTML: https://i.stack.imgur.com/2LEQO.png Here is the JSFiddle link: https://jsfiddle.net/cr9vkc7f/4/ I attempted to add a border to the left of my code snippet as shown below: border-left: 1px ...

htmlcsstwitter-bootstrap

Creating Material Icons using Pure JavaScriptWould you like to learn how to generate

I am currently exploring how to generate a Material Icon using pure JavaScript (document.createElement) const iconBox = document.createElement("div"); iconBox.style.width = "28px"; iconBox.style.cursor = "pointer"; iconBox.style.display = "flex"; iconBox.s ...

htmlsvgmaterial-ui