1

I have a html file where I am trying to display some data in a better way, like this:

Job Details  |  Value
_____________|__________
JobType      | Future     
________________________
Status       | Failed
________________________
CompletedDate| XXX     
________________________
MethodName   | XXX
________________________

I referenced https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example to get started with. Hoping it was straight forward, however I am missing something to arrange my below code in the table I desire:

I have simplified the code to look like below that can be used with lwc playground - https://developer.salesforce.com/docs/component-library/tools/playground/ced655354d445ce0d0da1587ed3b554644d95203/edit

<template>
        <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">JobType</p>
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
                        <p class="slds-p-around_medium slds-text-align_left">CompletedDate</p> 
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">Future</p>
                        <p class="slds-p-around_medium slds-text-align_left">Failed</p>
                        <p class="slds-p-around_medium slds-text-align_left">XXX</p>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

When I try to view this it comes out like below.

enter image description here

However the table started to look horizontally when I add another

which has quite a long text in it like below:

enter image description here

<template>
        <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">JobType</p>
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
                        <p class="slds-p-around_medium slds-text-align_left">CompletedDate</p> 
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">Future</p>
                        <p class="slds-p-around_medium slds-text-align_left">Failed</p>
                        <p class="slds-p-around_medium slds-text-align_left">XXX</p>
                        <p class="slds-p-around_medium slds-text-align_left">First error: Insert failed. First exception on row 0; first error: REQUIRED_FIELD_MISSING, Required fields are missing: [GroupId, UserOrGroupId]: [GroupId, UserOrGroupId]</p>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

CSS:

.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
 .large {
    height: 200px;
}
 .x-large {
    height: 300px;
}
 .custom-box {
    text-align: center;
    background-color: #f4f6f9;
    padding: 1rem;
    border: 1px solid #d8dde6;
}

I tried to use slds truncate_25 for the

element but that did not help. How can I achieve the result in this format( possibly with boders ):

Job Details  |  Value
_____________|__________
JobType      | Future     
________________________
Status       | Failed
________________________
CompletedDate| XXX     
________________________
MethodName   | XXX
________________________

2

I can never understand why people bother with lightning layouts. Basically they are just as verbose as regular html, and you have less control. If you just the regular slds design system + some divs, your layout is easy. Here:

    <lightning-card>
  <p class="slds-p-around_medium"  >The layout items extend vertically to fill the container.</p>
  <div class="slds-grid slds-p-around_medium" >
    <div class="slds-col slds-grow-none flex-col" >
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">JobType</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Status</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom " >CompletedDate</p> 
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom flex-cell" >Status</p>
    </div>
    <div class="slds-col slds-grow-none flex-col">
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Future</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Failed</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">XXX</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom flex-cell" style="width:200px;overflow-wrap: break-word">&nbsp;asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfwertwertwertwertwertwertwertwertwertwertwertwert</p>
    </div>
  </div>
</lightning-card>

CSS:

.flex-col{
    display:flex;
    flex-direction:column;
}
.flex-cell{
    flex:1;
}

The key css class is slds-grow-none. This means your columns will shrink to the size of the smallest item, which will line everything up nicely.

This renders as:

column layout image

Playground is here

7
  • Thanks for the explanation on using slds-grow-none. I am looking to add borders to each row in this table. Was wondering if there is any way to do so using this simple example. – SfdcBat Mar 18 '20 at 17:08
  • 2
    I've updated the code with some borders... you can do this more nicely by adding your own class to the outside div and defining a border that way. But this will do for this example. If you want the borders closer to the text, play with removing the bottom padding and adding in margin instead. – Caspar Harmer Mar 18 '20 at 17:13
  • 1
    Well, obviously if you can get it done using the lightning layouts that's good, but in my opinion it's an anti-pattern called the 'inner-platform' effect. Here: en.wikipedia.org/wiki/Inner-platform_effect. But that's only my opinion – Caspar Harmer Mar 18 '20 at 17:37
  • 1
    Have added further changes. Add a flex cell class to each row you'd like to keep in sync. You can't add to all as they flex evenly, so just do for rows where text gets big. – Caspar Harmer Mar 18 '20 at 18:56
  • 1
    much appreciated! Good learning. – SfdcBat Mar 18 '20 at 20:13

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.