[SalesForce] aligning elements in same line in lightning component

I am trying to align 2 elements in the same line next to each other, but having hard time. And i know this is kind of a simple question that can be googled. But i simply can't seem to do it.

Here is the code –

<div>
  <c:PF_InputCheckbox id="pf_nhw_contractor_submit_acknowledged" value="{!v.acknowledged}"/>
  I affirm I have read and understand the policy.
</div>

Here is the output –

The component c:PF_InputCheckbox is that checkbox thingy seen here. I want the text right next to it, not below it.

I have tried assigning class slds-show_inline-block to container div, but it still shows the checkbox and the text in two separate lines.

Best Answer

There are several ways of doing this. One of them would be using an slds grid

<div class="slds-grid">
  <div class="slds-col"> Component HERE</div>
  <div class="slds-col"> Text HERE </div>
</div>

would render the following:

you can then chose to align your text to the left, or right, again using slds. I encourage you to read the the SLDS documentation and or to do the SLDS Trailhead Module to expand your knowledge on the subject.

Related Solutions

[SalesForce] Overlay button on image – Lightning component

Try This

   .THIS .btn-refer {
       right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
}

.THIS.background {
    position: absolute;

}
.THIS img {
    position: relative;
}

[SalesForce] Dynamically accessing iteration item properties in a Template iteration on lightning web component

I have assumed, that data in criterion will be in this format.

{
    field1: "value"
    field2:223,
    ...
    ...
}

As we can't use expressions in LWC HTML, you need to preprocess the table data into an array. Basically a two-dimensional array. Instead of having each row as an object, I changed it to an array of key, fieldApiName, and value because we need generic field identifiers.

let criterionDataArray = [];
this.criterionArray.forEach((criterionRow, index) => {
    let newRow = Object.keys(criterionRow).map((currentValue, key) => {
        return {
            fieldApiName: key,
            value: currentValue,
            key: `${index}${key}`
        }
    });
    criterionDataArray.push({ Id: index, data: newRow });
});
this.tableData = criterionDataArray;

This is how you can iterate that.

HTML

<template if:true={tableData} for:each={tableData} for:item="criterion" for:index="index">
    <tr key={criterion.Id}>
        <td>{index}</td>
        <template if:true={criterion.data} for:each={criterion.data} for:item="row">
            <td data-field-api-name={row.fieldApiName} key={row.key}>{row.value}</td>
        </template>
    </tr>
</template>

When you need to save the data back, you need to convert this into an original format. You can do the same using array.map method.

Best Answer

Related Solutions

[SalesForce] Overlay button on image – Lightning component

[SalesForce] Dynamically accessing iteration item properties in a Template iteration on lightning web component

Related Topic