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.
However the table started to look horizontally when I add another
which has quite a long text in it like below:
<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
________________________