How to get all cards in a text box to dynamically display on 3 by row

[CIDAdmin]

Hello,

Question 1: We have an events and media page where each event is assigned a custom designed card. Currently, we display 3 cards per row (a text box) as shown below. Unfortunately, that becomes a problem when we need to add a new card, because each card needs to be shifted by one, with some moving from one text box to the next. Is there a way to instead have one single text box with all the cards, and use CSS to dynamically force this 3 columns display on large screens and 1 column display on mobile?

Question 2: Is it possible to extend the height of the cards to be the same? Ideally this should happen to cards that belong to the same row, otherwise even simply adjust all to the largest height without the need to hard-code this value in advance.

The page for reference: https://climatedata.imf.org/pages/events-and-media 

Thank you

Alessandra

[KlaraSchmitt]

Hello @CIDAdmin,

Regarding question #1, given you are already using our card code snippet, I will assume that you are at least moderately comfortable in the HTML editor of the Text Card. It is possible to move all three cards into the same Text Card to avoid the scenario you are describing, but you will need to add some of the grid classes to handle reflow in the layout. You will need to add a wrapper div around each .calcite-web card that represents the sizes you want the card to take based on device size.

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

Hub is based on a 12-column grid in Bootstrap 3, so the number of columns in a row need to equal 12, but a row's width changes (this is called a breakpoint) based on the device that is rendering your site. My example above roughly translates to "On mobile devices, this card should be 12 columns wide (100% of the available width). On tablets in portrait orientation, this card should be 6 columns wide (50% of the width). On tablets in landscape orientation AND anything larger, this card should be 4 columns wide (~30% of the width)."

You may find the examples on the Bootstrap documentation helpful: https://getbootstrap.com/docs/3.4/css/#grid-example-mixed 

In regards to Question #2, this is actually much more challenging to do with the Bootstrap grid if you want it handled dynamically. It is possible using CSS flexbox, but you would need to setup your own grid structure (and ignore everything I just wrote about Bootstrap's columns.) The reason we don't set height in that code snippet is because as soon as the card starts to resize to handle different devices, it often increases in height and a fixed height would cut off part of the card's contents. You could use custom css to set a min-height on the .calcite-web class, but I would definitely recommend adding a unique class to the row first, just so you don't impact anything else.

.custom-row-class .calcite-web {
min-height: 468px;  /*or the height of your tallest card in the row */
}

[kreed]

Hi @KlaraSchmitt ,

I am trying to implement the answer you provided for Question #2 so that I can make my cards equal height, but I have been unsuccessful in creating the custom row class. I am fairly new to HTML/CSS coding. If I wanted to use the custom row class for setting the min-height in the example code below, how would I go about doing so? Thank you!

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
  <div class="card-base">
    <div class="card-image-wrap">
      <img alt="Bridge Club, 1954" class="card-image" src="https://esri.github.io/calcite-web/assets/img/docs/bridge3.jpg">
      <div class="card-image-caption">
        Florida, January 1954
      </div>
    </div>
    <div class="card-content">
      <h4><a href="#">Card with Image</a></h4>
      <p>Cards can single buttons or button groups with inline justified buttons.</p>
      <div aria-label="actions" class="btn-group btn-group-justified" role="group">
        <a class="btn btn-default" href="#">Details</a><a class="btn btn-primary" href="#">View</a>
      </div>
    </div>
  </div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
  <div class="card-base">
    <div class="card-image-wrap">
      <img alt="Bridge Club, 1954" class="card-image" src="https://esri.github.io/calcite-web/assets/img/docs/bridge3.jpg">
      <div class="card-image-caption">
        Florida, January 1954
      </div>
    </div>
    <div class="card-content">
      <h4><a href="#">Card with Image</a></h4>
      <div aria-label="actions" class="btn-group btn-group-justified" role="group">
        <a class="btn btn-default" href="#">Details</a><a class="btn btn-primary" href="#">View</a>
      </div>
    </div>
  </div>
</div>
</div>

[KlaraSchmitt]

Hello Kreed,

You can set a unique row class by clicking the edit pencil icon on the row card and then at the bottom of the Appearance accordion, find the Row CSS Class and give it a unique name that won't interfere with the app stylesheets.

Row CSS Class field highlighted

Then in your text card you can add embedded style tags that allow you to apply CSS to your cards using the row class as your first selector. 

<style>
.my-custom-row-class .calcite-web {
...
}
</style>

However, as I noted above, using a min-height doesn't really account for responsive resizing if your cards differ in amount of content, so you may need additional CSS such as media queries or flex-box (and if you're using flex-box, you want to take the Bootstrap col-* classes out of your code.)