Multiple cards in floating arrangement

I am on AG/IG 13.3 or so.

I like the look of the cards in the Angular Card Component page, but I’m having issues making simple cards that match any of these layouts and float beside each other.

I am rebuilding an FAQ page where the cards are all differently sized, text is too big for some features, and there’s no room for an update/delete interface. I think my favorite layout is the horizontal layout with the divider (example).

I wouldn’t need any images, just update and delete buttons (icons should be ‘edit_note’ and ‘delete_forever’). The title will be the question, subtitle will be a category name, and content will be the answer to the question.

From the original FAQ page, I already have a scrollable div with a height and width that makes sense for the page. What I need is the card structure/styling in CSS to fill it properly.

Thanks in advance.

Hello Chris,

Thank you for posting in our community.

I have created a small sample demonstrating how to arrange multiple IgxCard components using CSS Grid. Please test it on your side and let me know whether you find it helpful.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

It looks like it will work. Thanks for the quick reply. I'll let you know if I have further questions on this.

Hello Chris,

I am glad that you find my suggestion helpful!

Thank you for choosing Infragistics components!

Regards
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

I'm getting the following errors on the card component html, even though I haven't yet altered your code:

Error: src/app/components/card/card.component.html:2:47 - error TS2322: Type 'string' is not assignable to type 'number'.

2  

                                                ~~~~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.


Error: src/app/components/card/card.component.html:11:57 - error NG8004: No pipe found with name 'truncate'.

11      {{ card.content.length > counter ? (card.content | truncate) : card.content }}
                                                           ~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.


Error: src/app/components/card/card.component.html:29:70 - error TS2322: Type 'string' is not assignable to type 'boolean'.

29   
                                                                        ~~~~~~~~~~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.

These don't seem like valid errors to me. The only noticeable difference is in my package.json where I'm using AG/IG 13.2.1 instead of the 13.1.1 in the provided example. There are no breaking changes between versions that make sense here.

Hello Chris,

I apologize for the delayed response.

I have created a small sample trying to reproduce the described behavior. I am using the 13.2.1 version of the igniteui-angular package. On my side there are no errors and the igx-card components are loaded as expected.

Attached you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation.

Looking forward to hearing from you.

Regards,

Viktor Kombov

Entry Level Software Developer

Infragistics, Inc.

Attachments:

1. igxCards.zip