0

I am having trouble aligning every single iteration of the values of the for loop appear on columns side by side. This is the output I have now. In the below picture I want to have Alberta and its value below to appear side to British Columbia.

enter image description here

The below is the way I am trying to have the values displayed. enter image description here

Here is my HTML & CSS:

  HTML:  
  <div>
    <lightning-card>
      <h1 slot="title" style="font-style:normal; font-family:'Candara';">
        <template for:each={provinces} for:item="province">
          <div class="province-stats" key={province.key}>
            <div>{province.province}<br>
              {province.internetOfferings}
            </div>
          </div>
        </template>
      </h1>
      <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
  </div>


  CSS:
  .province-stats {
      display: grid;
      grid-template-columns: 24px 24px 24px 24px;
  }
2

Why don't you try something simpler like building this out to use the lightning-layout? Inside the layout you can specify the details of each element or even include a new component for each one. you can also explore making a component and using it as a table column itself, this one i prefer.

Using lightning-layout

<div>
    <lightning-card>
      <h1 slot="title" style="font-style:normal; font-family:'Candara';">
        <lightning-layout multiple-rows="false" >
            <template for:each={provinces} for:item="province">
                <lightning-layout-item size="3" key={province.key} >
                    <p>{province.province}</p>
                    <p>{province.internetOfferings}</p>
                </lightning-layout-item>
            </template>
        </lightning-layout>
      </h1>
      <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
</div>

Using custom components with :host css

<!-- detail HTML -->
<template>
    <div class="slds-text-heading_medium" >{province.province}</div>
    <div class="slds-text-title">{province.internetOfferings}</div>
</template>

// The detail css
:host {
  display: table-column;
  width: 24px !important;
}

<!-- accessing in your loop -->
<div>
    <lightning-card>
        <!-- your output -->
        <c-my-custom-table provinces={provinces} ></c-my-custom-table>
        <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
</div>

<!-- Table element -->
<template>
    <tbody>
        <tr>
            <!-- each of your elements will appear as an equally spaced column now
            <template for:each={provinces} for:item="province">
                <c-my-custom-column province={province} key={province.key} ></c-my-custom-column>
            </template>
        </tr>
    </tbody>
</template>

// row element CSS
:host {
    display: table;
}
| improve this answer | |
  • 1
    Thanks @Ronnie, that was exactly the way I wanted it. I tried using lightning-layout, all this time I was not thinking about setting the multiple-rows attribute. Thanks again. – sumchans Apr 9 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.