In my Ionic/Angular project, I'm attempting to showcase two columns side by side in a row. However, the layout seems to be stacking them on top of each other with the

I am having some trouble arranging two columns in a row for my Ionic/Angular project. It seems like the content is stacking on top of each other instead of side by side.
Here's the CSS I'm using:

    <ion-grid class="rewards-container" *ngIf="!noRewardsData">
         <ion-row class="row-container">
           <ng-container *ngFor="let category of categories">
             <ion-col size="6" class="reward-item" *ngIf="contentVisibility[category.value] && getRewardsByCategory(category.value).length > 0">
               <ion-card class="reward-card" *ngFor="let item of getRewardsByCategory(category.value); let i = index" (click)="selectedReward(item)">
                 <div>
                   <img class="reward-image" [src]="item.imageUrl" (error)="$event.target.src = defaultImg">
                 </div>
                 <div class="reward-details">
                   <div class="reward-name">{{item.name}}</div>
                   <div class="reward-cost">{{item.points}}</div>
                 </div>
               </ion-card>
             </ion-col>
           </ng-container>
         </ion-row>
       </ion-grid>
htmlcssangularionic-frameworkgrid

Answer №1

Unfortunately, I'm unable to troubleshoot the issue without having access to all the necessary code. Below is a functional example that you can refer to for assistance!

html

<ion-grid class="rewards-container">
  <ion-row>
    <ng-container *ngFor="let category of categories">
      <ion-col size="6" class="reward-item">
        <ion-card
          class="reward-card"
          *ngFor="let item of categoriesData; let i = index"
        >
          <div>
            <img class="reward-image" [src]="item.imageUrl" />
          </div>
          <div class="reward-details">
            <div class="reward-name">{{ item.name }}</div>
            <div class="reward-cost">{{ item.points }}</div>
          </div>
        </ion-card>
      </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
})
export class ExampleComponent {
  categories = ['A', 'B'];
  categoriesData = [
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
  ];
}

stackblitz

Answer №2

When you press the {} button, paste your code in the designated Code sample pre code section.

To format your code, you can utilize the "unminify" tool. Set the Tab size to 1. Enter your code and click on Unminify. After that, use the Copy button and paste it on stackoverflow into the Code sample pre code area after pressing the {} button.

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

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Is there a way to create a 3-row list with horizontal scroll without the unwanted space between items? I've been using tailwindcss and grid to achieve this layout, but I'm encountering issues with spacing: https://i.stack.imgur.com/WeRyQ.png Cu ...

htmlcsstailwind-css

Site's design compromised by AJAX refresh intervention

Every time I run this code, the page ends up repeating itself. Adding to that, it doesn't refresh as required. Here is how it should work: Image Updated code segment below: <?php include 'config.php' ?> <script language="javascr ...

phphtmlajax

Styling in CSS for aligning a drop-down menu to the right side

I recently incorporated a CSS/JavaScript drop-down menu on my website, which I sourced from the following page: However, I am facing an issue with aligning the far-right drop-down properly. Specifically, I would like the items in the far-right drop-down t ...

cssdrop-down-menu

Sending an event from a child component to another using parent component in Angular

My form consists of two parts: a fixed part with the Save Button and a modular part on top without a submit button. I have my own save button for performing multiple tasks before submitting the form, including emitting an Event to inform another component ...

angulartypescript

How to showcase MongoDB data directly on the homepage

Looking for advice on how to display MongoDB database records on the front end of my website using Express. Each record has a category, and I want to organize and display them accordingly. As a beginner, any tips or suggestions would be greatly appreciat ...

node.jsangularmongodbexpress

Guide to putting a new track at the start of a jPlayer playlist

I am currently working on a website that utilizes the jPlayer playlist feature. I am facing an issue, as I need to implement a function that adds a song to the beginning of the playlist, but the existing add function only appends songs to the end of the pl ...

javascriptjqueryhtmljplayer

Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS. @font-face { font-family: 'awesome'; src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf'); } Although the path appears to be correct, I am ...

csssassfont-awesome

Tips for including information in a chart

I'm facing an issue with my current code as it is not functioning properly. Here is the link to the current output: http://jsfiddle.net/4GP2h/50/ ...

javascriptjqueryhtml

Sending the id from a component to a service in Angular

In my current project, I am working on a chat application using Angular with WebSocket integration. Let me provide an overview of the architecture I have designed for this project. I created a module called 'chatting' which contains a list of use ...

angulartypescript

Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> ...

javascripthtmlcssinfinite-scrolliscroll

Ways to duplicate a letter in HTML?

How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...

htmlcss

Double up on your calls to the subscribe function in Angular to ensure successful login

Within my angular 7 application, there is a sign in component that triggers the sign in function within the authentication service. This function initiates an HTTP post request and then subscribes to the response. My goal is to have both the auth service f ...

angulartypescript

Transferring information between components within AngularJS

export class AppComponent { title = 'shopping-cart'; ngOnInit() { } images = [ { title: 'At the beach', url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA ...

javascriptangular

What is the best way to position a div on top of another within a container using Bootstrap?

I have created a div with a date picker inside a form for future fields, but the initial display is next to the table instead of above it. I've searched for solutions similar to my issue, but none seem to work for me. You can view the correct layout ...

htmlbootstrap-4

Angular Error: "Provider's ngAfterViewInit method is not defined at callProviderLifecycles"

I encountered an error: evt = TypeError: provider.ngAfterViewInit is not a function at callProviderLifecycles while working on my Angular project. What's strange is that I do not have an ngAfterViewInit method, nor do I have the corresponding impl ...

angular

The perplexing phenomena of Ajax jQuery errors

Hey there! I'm having a bit of trouble with ajax jquery and could use some guidance. $.ajax({ type:"get", url:"www.google.com", success: function(html) { alert("success"); }, error : function(request,status,error) { alert(st ...

javascriptjqueryhtmlajax

What is the best way to make the Bootstrap navbar stay fixed at the top of the

I am currently experiencing an issue with the Bootstrap navbar while using version 5.0. Whenever the Bootstrap navbar expands, the content below it also moves down, which is not the desired behavior. I want the content to remain in place. I tried set ...

htmlcsstwitter-bootstrapbootstrap-5

I want to know the most effective way to showcase particular information on a separate page using Angular

Recently, I've been working with a mock json file that contains a list of products to be displayed on a Product page. My goal is to select a specific product, such as 'Product 1', and have only that product's information displayed on th ...

jsonangulartypescript

Calculating and displaying the output on an HTML page: A step-by-step guide

Within my HTML, I have two values stored in Session Storage: "Money" and "Time". These values are based on what the user inputted on a previous page. For example, if someone entered that they need to pay $100 in 2 days. My goal is to generate a list that ...

javascripthtmlmath

Error: The plugin "videoJsResolutionSwitcher" could not be located on AngularCli platform

Unable to recognize VideoJs-Resolution-Switcher as a Plugin! Issues: - Angular2 - Unable to find plugin: videoJsResolutionSwitcher - player.updateSrc is not a function Library Information: - videojs: https://github.com/videojs/video.js/ - vi ...

angularpluginsangular-clivideo.js