2

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 - enter image description here

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.

1

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:

enter image description here 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.

1

For use cases like this SLDS provides Name => Value pairs, as described here

With just one class (slds-list_horizontal), you can change the layout as needed, so they can be stacked, as you have it right now:

enter image description here

You could also align all of them inline:

enter image description here

Or align Name->Value pairs horizontal as you need it: enter image description here

Your markup would look like this:

<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak>I affirm I have read and understand the policy.</dt>
  <dd class="slds-item_detail">
    <c:PF_InputCheckbox id="pf_nhw_contractor_submit_acknowledged" value="{!v.acknowledged}"/>
  </dd>
</dl>

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.