0

New to Angular. Working on getting cards to show up in proper order in a bootstrap css layout.

The order they are currently in is

  • A F
  • B G
  • C H
  • D I
  • E J

When I squeeze the page down to a phone screen testing responsiveness, everything is in order A-J.

I would like the order to be like so, when in two column view:

  • A B
  • C D
  • E F
  • G H
  • I J

I thought I might find my solution in this answer, or on this page, or in this answer, but my layout remains as is.

Here's what I'm working with:

 <div class="card-columns mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

My cards aren't misaligned, like other people have problems with. It's just that they are in the wrong order.

Matt Zabojnik
  • 179
  • 12

1 Answers1

0

Your outermost div is using the card-columns class. This causes them to be ordered that way. Remove that class and they will be ordered how you expect.

<div class="mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12 col-lg-6" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
abney317
  • 7,760
  • 6
  • 32
  • 56
  • Doing so only stacks the cards vertically, and nothing is side-by-side. I would like two columns of cards in desktop view, but I want them ordered differently. – Matt Zabojnik May 24 '19 at 19:55
  • You're setting the column width to 12 with `col-sm-12`. This will apply to all screen sizes that are "small" or bigger. Try using both `col-sm-12` and `col-lg-6` – abney317 May 24 '19 at 20:08
  • @abney317 what he wants to do is create a masonry layout for bootstrap cards. card-column he used is not a problem. Bootstrap 4 card-column use to create masonry layout but will first do top to bottom and then right to left. See This https://getbootstrap.com/docs/4.0/components/card/#card-columns – Naitik Kundalia May 30 '19 at 20:02
  • @abney317 also see this https://stackoverflow.com/questions/40760869/bootstrap-4-order-masonry-like-column-cards-horizontal-instead-of-vertical – Naitik Kundalia May 30 '19 at 20:02
  • @NaitikKundalia That's the opposite of what he wants according to his question. – abney317 May 30 '19 at 20:07
  • May be you are right because question has lack of information but col-sm-12 is use inside card not outside and he told he want to align card not its content(card-body) so we can guess may be he want as i said – Naitik Kundalia May 30 '19 at 20:28
  • I'm talking about card layout, not card content layout. I still have not been able to fix this issue. – Matt Zabojnik Jun 26 '19 at 21:04
  • Everything on the internet points to needing masonry. I have no idea how to implement that, and the developer I hired says it can't be done with CSS... Now what? – Matt Zabojnik Jun 26 '19 at 23:06
  • Maybe draw up a picture of what you're wanting because I guess I'm not understanding – abney317 Jul 01 '19 at 15:08