0

I have a below LWC code where the requirement is to display the label and value next to each other but the value is being shown at the bottom of the label, please suggest

<template>
  <lightning-record-view-form
    record-id={productConfigId}
    object-api-name="Apttus_Config2__ProductConfiguration__c"
    density="compact"
  >
    <lightning-messages></lightning-messages>
    <lightning-layout >
      <lightning-layout-item>
        <div class="slds-p-around_xx-small">
          <label for="proposal">PROPOSAL:</label>
          <lightning-output-field id="proposal" field-name="Apttus_QPConfig__Proposald__c" variant="label-hidden">
          </lightning-output-field>
        </div>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-record-view-form>
</template>

currently it is showing as below it should be next to each other.

enter image description here

Improve this question

1 Answer 1

Reset to default
0

You can apply slds as below. It will bring the label and field in same row:-

    <div class="slds-grid">
        <div class="slds-col">
            <label for="proposal">PROPOSAL:</label>
        </div>
        <div class="slds-col">
            <lightning-output-field id="proposal" field-name="Apttus_QPConfig__Proposald__c" variant="label-hidden">
            </lightning-output-field>
        </div>
    </div>

Check the playground here:- Playground

Improve this answer
2
  • Thank you sanket, could you please confirm if we can use LDS for related parent records?
    – gs650x
    Commented Oct 30, 2019 at 10:48
  • Can you create a new thread for your query related to LDS for related parent records?
    – sanket kumar
    Commented Oct 30, 2019 at 10:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .